<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>javascript | 学习笔记</title><meta name="author" content="lzoxun"><meta name="copyright" content="lzoxun"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="早期 js 存在的一些问题  var 定义变量没有作用域 不能像常规语言一样使用 class，js 原型链方式是基于很早以前的Self语言的 没有模块化 无类型检测 typeof null 为什么是 object   JS 概念性问题数据类型基础知识   弱类型或者说动态语言（一个变量可以保存不同的数据类型） 原始类型 Boolean、Null、Undefined、Number、String、Bi">
<meta property="og:type" content="article">
<meta property="og:title" content="javascript">
<meta property="og:url" content="http://example.com/2023/07/22/web/issues/issues-javacript/index.html">
<meta property="og:site_name" content="学习笔记">
<meta property="og:description" content="早期 js 存在的一些问题  var 定义变量没有作用域 不能像常规语言一样使用 class，js 原型链方式是基于很早以前的Self语言的 没有模块化 无类型检测 typeof null 为什么是 object   JS 概念性问题数据类型基础知识   弱类型或者说动态语言（一个变量可以保存不同的数据类型） 原始类型 Boolean、Null、Undefined、Number、String、Bi">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png">
<meta property="article:published_time" content="2023-07-22T07:14:09.693Z">
<meta property="article:modified_time" content="2023-07-22T07:14:09.693Z">
<meta property="article:author" content="lzoxun">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/2023/07/22/web/issues/issues-javacript/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":true,"top_n_per_article":1,"unescape":true,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#1f1f1f","position":"bottom-left"},
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'javascript',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2023-07-22 15:14:09'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
    win.getCSS = (url,id = false) => new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = url
      if (id) link.id = id
      link.onerror = reject
      link.onload = link.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        link.onload = link.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(link)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const now = new Date()
          const hour = now.getHours()
          const isNight = hour <= 6 || hour >= 18
          if (t === undefined) isNight ? activateDarkMode() : activateLightMode()
          else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>(()=>{
  const $loadingBox = document.getElementById('loading-box')
  const $body = document.body
  const preloader = {
    endLoading: () => {
      $body.style.overflow = ''
      $loadingBox.classList.add('loaded')
    },
    initLoading: () => {
      $body.style.overflow = 'hidden'
      $loadingBox.classList.remove('loaded')
    }
  }

  preloader.initLoading()
  window.addEventListener('load',() => { preloader.endLoading() })

  if (false) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
})()</script><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">108</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header"><nav id="nav"><span id="blog-info"><a href="/" title="学习笔记"><span class="site-name">学习笔记</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">javascript</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2023-07-22T07:14:09.693Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2023-07-22T07:14:09.693Z" title="更新于 2023-07-22 15:14:09">2023-07-22</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="javascript"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="早期-js-存在的一些问题"><a href="#早期-js-存在的一些问题" class="headerlink" title="早期 js 存在的一些问题"></a>早期 js 存在的一些问题</h2><blockquote>
<ul>
<li>var 定义变量没有作用域</li>
<li>不能像常规语言一样使用 class，js 原型链方式是基于很早以前的<code>Self</code>语言的</li>
<li>没有模块化</li>
<li>无类型检测</li>
<li>typeof null 为什么是 object</li>
</ul>
</blockquote>
<h2 id="JS-概念性问题"><a href="#JS-概念性问题" class="headerlink" title="JS 概念性问题"></a>JS 概念性问题</h2><h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><p>基础知识</p>
<blockquote>
<ul>
<li>弱类型或者说动态语言（一个变量可以保存不同的数据类型）</li>
<li>原始类型 Boolean、Null、Undefined、Number、String、Bigint（ecma 2020）、Symbols（ecma 2015）</li>
<li>一组属性的集合 对象 Object （Object、Array、Function、Date、）</li>
</ul>
</blockquote>
<p>1、数据类型判断 - typeof</p>
<blockquote>
<p>返回一个字符串，代表检测数据的类型</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 正常情况返回数据类型小写单词，一下特殊情况</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">Infinity</span> === <span class="string">&quot;number&quot;</span>;</span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">NaN</span> === <span class="string">&quot;number&quot;</span>;</span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">Number</span>(<span class="number">1</span>) === <span class="string">&quot;number&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">typeof</span> <span class="number">42n</span> === <span class="string">&quot;bigint&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">Symbol</span>() === <span class="string">&quot;symbol&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 应用类型对象包含[[call]]方法 结果就返回function</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="keyword">function</span> (<span class="params"></span>) &#123;&#125; === <span class="string">&quot;function&quot;</span>;</span><br><span class="line"><span class="keyword">typeof</span> <span class="title class_">Array</span> === <span class="string">&quot;function&quot;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">typeof</span> &#123; <span class="attr">a</span>: <span class="number">1</span> &#125; === <span class="string">&quot;object&quot;</span>;</span><br><span class="line"><span class="keyword">typeof</span> [<span class="number">1</span>, <span class="number">2</span>, <span class="number">4</span>] === <span class="string">&quot;object&quot;</span>;</span><br><span class="line"><span class="keyword">typeof</span> <span class="keyword">new</span> <span class="title class_">Date</span>() === <span class="string">&quot;object&quot;</span>;</span><br><span class="line"><span class="keyword">typeof</span> /regex/ === <span class="string">&quot;object&quot;</span>; <span class="comment">// 历史结果请参阅正则表达式部分</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="keyword">new</span> <span class="title class_">Boolean</span>(<span class="literal">true</span>) === <span class="string">&quot;object&quot;</span>;</span><br><span class="line"><span class="keyword">typeof</span> <span class="keyword">new</span> <span class="title class_">Number</span>(<span class="number">1</span>) === <span class="string">&quot;object&quot;</span>;</span><br><span class="line"><span class="keyword">typeof</span> <span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&quot;abc&quot;</span>) === <span class="string">&quot;object&quot;</span>; <span class="comment">//String &#123;0:a,1:b,3:c,length:3,....&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null 的类型标签是 0</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="literal">null</span> === <span class="string">&quot;object&quot;</span>;</span><br></pre></td></tr></table></figure>

<p>2、数据类型判断 - instanceof</p>
<blockquote>
<ul>
<li>object instanceof constructor</li>
<li>instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。上级没有找上上级</li>
<li>返回 true false</li>
<li>可以判断 Array、Object、Data 等</li>
</ul>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">C</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">D</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> o = <span class="keyword">new</span> <span class="title function_">C</span>();</span><br><span class="line">o <span class="keyword">instanceof</span> C; <span class="comment">// true，因为 Object.getPrototypeOf(o) === C.prototype</span></span><br><span class="line">o <span class="keyword">instanceof</span> D; <span class="comment">// false，因为 D.prototype 不在 o 的原型链上</span></span><br><span class="line">o <span class="keyword">instanceof</span> <span class="title class_">Object</span>; <span class="comment">// true，因为 Object.prototype.isPrototypeOf(o) 返回 true</span></span><br><span class="line">o <span class="keyword">instanceof</span> <span class="title class_">Function</span>; <span class="comment">// false</span></span><br><span class="line">D <span class="keyword">instanceof</span> <span class="title class_">Function</span>; <span class="comment">// true</span></span><br></pre></td></tr></table></figure>

<p>3、数据类型判断 - prototype.toString</p>
<blockquote>
<p>各个类型自己和自己 prototype 的 toStrig 结果不同意，有些是函数，有些是字面量，Math.toString()正常，所以统一用对象原型的</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="string">&#x27;&#x27;</span>) ;   <span class="comment">// [object String]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="number">1</span>) ;    <span class="comment">// [object Number]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="literal">true</span>) ; <span class="comment">// [object Boolean]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="title class_">Symbol</span>()); <span class="comment">//[object Symbol]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="literal">undefined</span>) ; <span class="comment">// [object Undefined]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="literal">null</span>) ; <span class="comment">// [object Null]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="keyword">new</span> <span class="title class_">Function</span>()) ; <span class="comment">// [object Function]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="keyword">new</span> <span class="title class_">Date</span>()) ; <span class="comment">// [object Date]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>([]) ; <span class="comment">// [object Array]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="keyword">new</span> <span class="title class_">RegExp</span>()) ; <span class="comment">// [object RegExp]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="keyword">new</span> <span class="title class_">Error</span>()) ; <span class="comment">// [object Error]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="variable language_">document</span>) ; <span class="comment">// [object HTMLDocument]</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">toString</span>.<span class="title function_">call</span>(<span class="variable language_">window</span>) ; <span class="comment">//[object global] window 是全局对象 global 的引用</span></span><br><span class="line">...</span><br></pre></td></tr></table></figure>

<p>4、数据类型判断 - constructor</p>
<blockquote>
<ul>
<li>null 和 undefined 是无效的对象</li>
<li>constructor 是不稳定的，这个主要体现在自定义对象上，当开发者重写 prototype 后</li>
</ul>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> o = &#123;&#125;;</span><br><span class="line">o.<span class="property">constructor</span> === <span class="title class_">Object</span>; <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> o = <span class="keyword">new</span> <span class="title class_">Object</span>();</span><br><span class="line">o.<span class="property">constructor</span> === <span class="title class_">Object</span>; <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a = [];</span><br><span class="line">a.<span class="property">constructor</span> === <span class="title class_">Array</span>; <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> a = <span class="keyword">new</span> <span class="title class_">Array</span>();</span><br><span class="line">a.<span class="property">constructor</span> === <span class="title class_">Array</span>; <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> n = <span class="keyword">new</span> <span class="title class_">Number</span>(<span class="number">3</span>);</span><br><span class="line">n.<span class="property">constructor</span> === <span class="title class_">Number</span>; <span class="comment">// true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// ========================================</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">F</span>(<span class="params"></span>) &#123;&#125;</span><br><span class="line"><span class="keyword">let</span> f = <span class="keyword">new</span> <span class="title function_">F</span>();</span><br><span class="line">f.<span class="property">constructor</span> == F; <span class="comment">//true</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    F.prototype = &#123;</span></span><br><span class="line"><span class="comment">        constructor: ƒ F()</span></span><br><span class="line"><span class="comment">        [[Prototype]]: Object</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line">f.<span class="property"><span class="keyword">prototype</span></span> = &#123; <span class="attr">a</span>: <span class="number">1</span> &#125;;</span><br><span class="line"><span class="keyword">let</span> f2 = <span class="keyword">new</span> <span class="title function_">F</span>();</span><br><span class="line">f2.<span class="property">constructor</span> == F; <span class="comment">//false</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    F.prototype = &#123;</span></span><br><span class="line"><span class="comment">        a:1</span></span><br><span class="line"><span class="comment">        [[Prototype]]: Object</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line">F.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">constructor</span> = F;</span><br><span class="line"><span class="keyword">let</span> f3 = <span class="keyword">new</span> <span class="title function_">F</span>();</span><br><span class="line">f3.<span class="property">constructor</span> == F; <span class="comment">//true</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    F.prototype = &#123;</span></span><br><span class="line"><span class="comment">        a:1</span></span><br><span class="line"><span class="comment">        constructor: ƒ F()</span></span><br><span class="line"><span class="comment">        [[Prototype]]: Object</span></span><br><span class="line"><span class="comment">    &#125;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<p>5、jquery.type(‘xxx’)</p>
<h3 id="js-常见的内置对象"><a href="#js-常见的内置对象" class="headerlink" title="js 常见的内置对象"></a>js 常见的内置对象</h3><p>3 中包装对象 <strong>Number</strong> <strong>String</strong> <strong>Boolean</strong></p>
<p>包装对象的装箱与拆箱<br>装箱:把基本数据类型转化为对应引用数据类型的操作<br>通过 new 的方式得到实例<br>拆箱:把引用数据类型转化为对应基本数据类型的操作(数组对象也有拆箱)<br>调用实例的 valueOf()和 toString() 实现拆箱</p>
<pre><code>    js内部有一个toPrimitive(input,type) 方法 判断传入的值是否为原始类型，是返回，不是就调用valueOf方法，结果还不是就掉toString方法
    valueOf()  判断是否有基本类型值，有就返回，没有则返回对象本身
    toString() 得到的都是字符串类型 &quot;123&quot;,valueOf 可以得到正常的 123
    <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(&#123;&#125; + []) [object object]</span><br><span class="line"><span class="number">1</span>、&#123;&#125; 调用<span class="title function_">toPrimitive</span>()</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(&#123;&#125;.<span class="title function_">valueOf</span>()) =&gt; &#123;&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(&#123;&#125;.<span class="title function_">toString</span>()) =&gt; [object object]</span><br><span class="line"></span><br><span class="line"><span class="number">2</span>、[] 调用toPrimitive</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([].<span class="title function_">valueOf</span>()) =&gt; &#123;&#125;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>([].<span class="title function_">toString</span>()) =&gt; <span class="string">&quot;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="number">3</span>、有些浏览器 会把前面的 &#123;&#125; 当做代码块 识别为 <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">0</span> + []) 结果就是<span class="number">0</span>，非[object object]</span><br></pre></td></tr></table></figure>
</code></pre>
<p>字面量可以调用方法的原因 ‘abc’.indexOf(‘a’) (隐式装箱)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"># <span class="number">1</span></span><br><span class="line"><span class="keyword">var</span> str = <span class="keyword">new</span> <span class="title class_">String</span>(<span class="string">&#x27;abc&#x27;</span>);</span><br><span class="line"># <span class="number">2</span></span><br><span class="line">str.<span class="title function_">indexOf</span>(<span class="string">&quot;a&quot;</span>);</span><br><span class="line"># <span class="number">3</span></span><br><span class="line">str = <span class="literal">null</span>;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>(1)实际上，每当读取一个基本类型的时候，js 内部会自动创建一个基本包装类型对象，可以让我们调用一些方法来操作<br>(2)’a’.indexOf(‘a’)在调用过程中会先 let str &#x3D; new String(‘a’)，然后调用 indexOf，调用完毕 str &#x3D; null, 销毁该对象</p>
<p>其他内置对象<br>Date、Math、Function、Array、</p>
<h3 id="数据存储形式"><a href="#数据存储形式" class="headerlink" title="数据存储形式"></a>数据存储形式</h3><blockquote>
<ul>
<li>栈 计算机为原始数据类型开辟了一块内存空间 number string</li>
<li>堆 计算机为应用数据类型开辟了一块内存空间 object</li>
<li><code>栈内存</code>是内存中用于存放临时变量的一片内存块(储存变量名称、原始变量值、引用变量地址)</li>
<li><code>堆内存</code>存储 地址和<code>栈内存中</code> 地址或指针指向的对象</li>
<li>赋值变量会将<code>栈内存的值</code>或<code>栈内存的地址</code>复制一份，拿给新的变量</li>
</ul>
</blockquote>
<h4 id="存储空间"><a href="#存储空间" class="headerlink" title="存储空间"></a>存储空间</h4><p>硬件<br>内存：访问速度快、容量小、临时存在<br>硬盘：访问速度慢、容量大、永久存在<br>软件<br>App 下载 硬盘<br>App 运行 内存<br>运行<br>函数申明（函数体）：占用内存空间，运行期间永久存在<br>函数运行（执行上下文）：临时占用存储空间</p>
<p>程序运行，计算机或浏览器会给程序<code>分配</code>一段连续的内存（以使用方式的不同分成 栈内存和堆内存）</p>
<p>如果分配了 0-1000 段的内存<br>栈内存 –&gt; 管理函数执行，程序上下文执行，执行栈, 从高地址位向下使用(1000,999,998…)<br>主要为了管理函数的执行顺序<br>堆内存 –&gt; 存储对象，从低地址位向上使用(0,1,2…)<br>?? 对象里面的原始类型是存在堆中的<br>执行栈中如果入栈的是对象，那么进入的是对象地地址，对象存放堆内存中，对象内的原始类型数据也在堆中</p>
<p>内存溢出：当程序运行使用的内存超过<code>分配来的</code>这些，就会<code>内存溢出</code>（一般设定栈内存比较小的，大部分情况也是<code>栈溢出</code>）<br>内存泄漏：当某一段内存我们失去了对它的控制、失去引用、回收机制也管理不了的情况</p>
<h4 id="垃圾回收机制"><a href="#垃圾回收机制" class="headerlink" title="垃圾回收机制"></a>垃圾回收机制</h4><p>哪些被分配的内存确实已经不再需要了，自动回收<br>JS 会周期性遍历内存空间，发现没有被引用的对象就会自动回收</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">a=<span class="number">1</span>    a=<span class="number">1</span></span><br><span class="line">b=a    b=<span class="number">1</span></span><br><span class="line">b++    b=<span class="number">2</span>  <span class="number">1</span>、<span class="number">1</span>、<span class="number">2</span>属与三块内存空间，b++后，b=<span class="number">1</span>那个<span class="number">1</span>的地址就是去了引用，下次清除周期到了将会被回收</span><br><span class="line"></span><br><span class="line"># 如果 b=<span class="number">1</span> 的<span class="number">1</span> 和<span class="number">2</span>时同一块内存空间的话，那么说明内存是可以被覆盖的，不好</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = &#123;<span class="attr">c</span>:<span class="number">1</span>&#125;;</span><br><span class="line">a = <span class="literal">null</span>; <span class="comment">// 将a标记为未使用状态或没有引用状态，等待下次遍历时回收</span></span><br><span class="line"></span><br><span class="line">js 变量名是否存在内存中??</span><br><span class="line"><span class="number">1</span>、变量 a 是不存在内存空间的，内存空间只有值和地址，变量名是给人看的</span><br></pre></td></tr></table></figure>

<p>标记 - 清除算法<br>这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。</p>
<p>v8 的垃圾回收机制</p>
<h3 id="跨域方案总结"><a href="#跨域方案总结" class="headerlink" title="跨域方案总结"></a>跨域方案总结</h3><h3 id="事件循环-EventLoop"><a href="#事件循环-EventLoop" class="headerlink" title="事件循环 EventLoop"></a>事件循环 EventLoop</h3><p>正常情况下一个应用程序会有一个进程，包含着非常多线程，但是浏览器时多进程的<br>主线程 与 任务队列 里代码的不断循环执行，异步任务未完成之前(在 web 异步 API 操作的地方等待)是不会加入任务队列的</p>
<p>浏览器的事件循环</p>
<ul>
<li>浏览器<code>渲染进程</code>、网络进程、GPU 进程….</li>
<li>重点<code>渲染进程</code>包含<code>js引擎进程</code>、<code>HTTP请求进程</code>、<code>定时器触发进程</code>、<code>事件触发进程</code>、<code>GUI进程</code>等</li>
<li>浏览器与<code>NodeJS</code>异步任务执行原理，背后是通过<code>事件驱动</code>完成的</li>
<li>事件驱动包括<code>事件触发</code>、<code>任务选择</code>、<code>任务执行</code></li>
<li>由特定的事件触发特定的任务（如用户 click 事件，自动的定时器事件）</li>
<li>事件循环就是在事件驱动模式中，管理和执行事件的流程</li>
<li>在事件驱动中，当有事件触发后吧，被触发的事件会按顺序，暂时存在一个队列中，等待 js 同步任务执行完成，再从队列中取出<code>要处理的事件处理</code> - 事件循环来控制什么时候取事件，或优先取的事件<br>浏览器与 js<blockquote>
<p>浏览器多线程，只会给 js 一个线程,所有 js 是单线程<br>js 单线程，所以只能通过浏览器的多线程来执行<code>异步任务</code><br>js 执行代码的<code>主线程</code>只有一个,<code>浏览器提供的JS引擎线程</code>,主线程执行同步任务<br>此外还有<code>定时器线程</code>、<code>HTTP请求线程</code>、<code>Promise线程</code>等,来执行其他任务<br>当开定时器或调用接口时，这些任务将分配给他们对应的线程来做，完成了再回到住线程<br>执行步骤</p>
</blockquote>
</li>
<li>运行首先执行主线程(将同步代码按顺序排在<code>执行栈</code>中)，当遇到 Promise 或定时器时会(保存挂起，时间到了或 ajax 的 success 等的时候)丢到任务列队(Event Quque)里,继续执行主线程的内容</li>
<li>主线程完了才会走任务列队(已完成的)的微任务(await，Promise 等)，再走宏任务(Ajax、定时器,事件绑定等),加入执行栈继续执行,宏任务完了就运行结束了<ul>
<li>微任务(micro task):<code>微任务队列</code>先，包含:Promise、new MutaionObserver()、<code>queueMicrotask(()=&gt;&#123;&#125;) 自定义微任务</code><ul>
<li>微任务不会有浏览器进线帮忙处理，类似将<code>.then</code>的代放到<code>主线程尾部(或叫微任务队列)</code>，当前循环执行，能执行的微任务<code>都执行完</code>，才会执行宏任务</li>
<li><code>new Promise(()=&gt;&#123;&#125;)</code>这里的回调会和住线程一起执行，resolve 或 reject 的时候才有微任务的 then</li>
<li><code>await</code> 后面的函数就相当于<code>new Promise</code>的回调，会直接执行，async 函数里 await 下面的相当于.then 的微任务</li>
</ul>
</li>
<li>宏任务(macro task):<code>宏任务队列</code>后，包含:定时器相关、Ajax、I&#x2F;O ,事件监听（load,click,…）…操作<ul>
<li>宏任务有浏览器线程帮忙异步处理，下次循环，如有结果再通过回调执行，宏任务执行完一个，都会先查看是否有微任务执行，没有才执行下一个</li>
</ul>
</li>
<li>其他：requestAnimationFrame<ul>
<li>事件周期最后是页面渲染，二页面渲染之前调用 requestAnimationFrame 回调，当前周期执行的，如果说宏任务是下次 tick 执行的话，那么就不属于宏任务</li>
<li>但是 window.requestAnimationFrame 即使在<code>Promise</code>前面调用，也是渲染页面前最后执行，微任务顺序不定</li>
<li>window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，时间是下次重绘之前。</li>
</ul>
</li>
</ul>
</li>
<li>主线程执行完后去找一个个的微宏任务，找到一个拿到主线程继续执行执行完再<code>不断循环</code>去找。。。，就叫做 Event Loop 事件循环</li>
<li>每次循环就是一个事件周期(tick)</li>
<li>每个周期结束之后浏览器才会对页面进行渲染，所以有时操作 DOM 不一定会立马刷新视图</li>
<li>视图重汇之前会执行<code>requestAnimationFrame</code>回调</li>
<li>主线程(执行栈)每次执行方法，会生成一个独有的执行环境(上下文 context)，执行结束，销毁独有环境，并从栈弹出此方法，继续下面代码</li>
<li>宏任务误差延迟问题:如果将定时器设置 100ms 后执行，首先会挂掉任务列队，100ms 时间到了,如果主线程还在执行中，定时器只能等待，同步代码越长，误差将会越大</li>
</ul>
<p>Node 的事件循环</p>
<ul>
<li>浏览器的事件循环时由 html5 定义的规范来实现的，node 的事件是有<code>libuv</code>实现的</li>
</ul>
<p><a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1gb4y1U7Un?spm_id_from=333.999.0.0">学习</a></p>
<h3 id="call、apply、bind"><a href="#call、apply、bind" class="headerlink" title="call、apply、bind"></a>call、apply、bind</h3><ul>
<li>共同点<ul>
<li>都能改变函数内部 this 指向</li>
</ul>
</li>
<li>使用</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fu</span>(<span class="params">a, b</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">let</span> obj = &#123;</span><br><span class="line">  <span class="attr">c</span>: <span class="number">10</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//fu函数调用call,通过原型链机制，找到fu.prototype上的call函数进行调用</span></span><br><span class="line"><span class="comment">//fu.call(newThis,a,b);</span></span><br><span class="line"><span class="comment">// 非严格模式</span></span><br><span class="line">fu.<span class="title function_">call</span>(); <span class="comment">//不传，指向window(默认指向)</span></span><br><span class="line">fu.<span class="title function_">call</span>(<span class="literal">null</span>); <span class="comment">//传null,指向window</span></span><br><span class="line">fu.<span class="title function_">call</span>(<span class="literal">undefined</span>); <span class="comment">//传undefined ，指向window</span></span><br><span class="line">fu.<span class="title function_">call</span>(<span class="number">1</span>, <span class="number">2</span>); <span class="comment">//传1，指向 Number(1)</span></span><br><span class="line">fu.<span class="title function_">call</span>(obj, <span class="number">1</span>, <span class="number">2</span>); <span class="comment">//传obj,指向obj</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//严格模式</span></span><br><span class="line"><span class="comment">// fu.call() //不传，指向undefined</span></span><br><span class="line"><span class="comment">// fu.call(null) //传null,指向null</span></span><br><span class="line"><span class="comment">// fu.call(undefined) //传undefined ，指向undefined</span></span><br><span class="line"><span class="comment">// fu.call(1,2) //传1，指向 1</span></span><br><span class="line"><span class="comment">// fu.call(obj,1,2) //传obj,指向obj</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//apply,只是参数列表通过数组传递</span></span><br><span class="line">fu.<span class="title function_">apply</span>(obj, [<span class="number">1</span>, <span class="number">2</span>]);</span><br><span class="line"></span><br><span class="line"><span class="comment">//bind 用法也与call类似，区别是是否立即执行</span></span><br><span class="line">fu.<span class="title function_">bind</span>(obj, <span class="number">1</span>, <span class="number">2</span>)();</span><br></pre></td></tr></table></figure>

<ul>
<li><p>实现 call</p>
<blockquote>
<p>三点：修改 this、执行函数、返回行数返回值</p>
</blockquote>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="title class_">Function</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">call</span> = <span class="keyword">function</span> (<span class="params">thisArg, args</span>) &#123;</span><br><span class="line">  <span class="comment">// this指向调用call的对象</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="variable language_">this</span> !== <span class="string">&quot;function&quot;</span>) &#123;</span><br><span class="line">    <span class="comment">// 调用call的若不是函数则报错</span></span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="title class_">TypeError</span>(<span class="string">&quot;Error&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  thisArg = thisArg || <span class="variable language_">window</span>;</span><br><span class="line">  thisArg.<span class="property">fn</span> = <span class="variable language_">this</span>; <span class="comment">// 将调用call函数的对象添加到thisArg的属性中</span></span><br><span class="line">  <span class="keyword">const</span> result = thisArg.<span class="title function_">fn</span>(...[...<span class="variable language_">arguments</span>].<span class="title function_">slice</span>(<span class="number">1</span>)); <span class="comment">// 执行该属性</span></span><br><span class="line">  <span class="keyword">delete</span> thisArg.<span class="property">fn</span>; <span class="comment">// 删除该属性,执行的fn内部this中依然存在该函数，这个删除是函数执行后才做的</span></span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">  问题: 如何去除调用函数fn时内部<span class="variable language_">this</span>对象会出现fn自己的问题;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="js-删除对象属性"><a href="#js-删除对象属性" class="headerlink" title="js 删除对象属性"></a>js 删除对象属性</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">delete</span> obj.<span class="property">a</span>;</span><br><span class="line"><span class="title class_">Reflect</span>.<span class="title function_">deleteProperty</span>(obj, <span class="string">&quot;a&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="jQuery-的链式操作"><a href="#jQuery-的链式操作" class="headerlink" title="jQuery 的链式操作"></a>jQuery 的链式操作</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">jQuery</span>(<span class="params">selector, context</span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> jQuery.<span class="property">fn</span>.<span class="title function_">init</span>(selector, context);</span><br><span class="line">&#125;</span><br><span class="line">jQuery.<span class="property">fn</span> = jQuery.<span class="property"><span class="keyword">prototype</span></span> = &#123;</span><br><span class="line">  <span class="comment">//fn即对应prototype</span></span><br><span class="line">  <span class="attr">constructor</span>: jQuery,</span><br><span class="line">  <span class="attr">init</span>: <span class="keyword">function</span> (<span class="params">selector, context</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(selector, context);</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">then</span>: <span class="keyword">function</span> (<span class="params">par</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(par);</span><br><span class="line">    <span class="keyword">return</span> <span class="variable language_">this</span>;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">jQuery.<span class="property">fn</span>.<span class="property">init</span>.<span class="property"><span class="keyword">prototype</span></span> = jQuery.<span class="property">fn</span>;</span><br><span class="line"></span><br><span class="line"><span class="title function_">jQuery</span>(<span class="number">1</span>, <span class="number">2</span>).<span class="title function_">then</span>(<span class="number">4</span>).<span class="title function_">then</span>(<span class="number">5</span>);</span><br></pre></td></tr></table></figure>

<h3 id="new-内部做了什么？"><a href="#new-内部做了什么？" class="headerlink" title="new 内部做了什么？"></a>new 内部做了什么？</h3><p>1、创建新对象<br>2、将新对象的原型链执行 我们 new 那个构造函数的 prototype<br>3、判断构造函数是否有返对象，如果有，那么构造函数有问题，直接返回他要返回的东西<br>如果没有，返回刚刚创建的对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">Person</span>(<span class="params">name</span>) &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">name</span> = name;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">myNew</span>(<span class="params">Con, ...args</span>) &#123;</span><br><span class="line">  <span class="comment">// 创建一个新的空对象</span></span><br><span class="line">  <span class="keyword">let</span> obj = &#123;&#125;;</span><br><span class="line">  <span class="comment">//</span></span><br><span class="line">  <span class="comment">// obj.__proto__ = Con.prototype;</span></span><br><span class="line">  <span class="title class_">Object</span>.<span class="title function_">setPrototypeOf</span>(obj, <span class="title class_">Con</span>.<span class="property"><span class="keyword">prototype</span></span>);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 将构造函数里的属性方法复制一份给 obj</span></span><br><span class="line">  <span class="comment">// 设置构造函数内 this指向，不然默认指向window，this.name 就变成window name了</span></span><br><span class="line">  <span class="keyword">let</span> res = <span class="title class_">Con</span>.<span class="title function_">apply</span>(obj, args);</span><br><span class="line">  <span class="comment">// 对构造函数返回值做判断，然后返回对应的值（所以构造函数不能返回对象，可以返回this，也可以返回基本类型，但是基本类型没什么作用）</span></span><br><span class="line">  <span class="comment">// 构造函数中默认隐式返回this了的</span></span><br><span class="line">  <span class="keyword">return</span> res <span class="keyword">instanceof</span> <span class="title class_">Object</span> ? res : obj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h3><blockquote>
<p>全局作用域、函数作用域、块级作用域、词法作用<br>js 用的<code>词法作用域</code>:这就意味着函数的执行依赖于函数<code>定义的时候</code>所产生（而不是函数调用的时候产生的）的<code>变量作用域</code>。</p>
</blockquote>
<h4 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h4><blockquote>
<p>闭包就是外层函数中 return 出新函数,使新函数通过外层函数在外面可以使用，新函数中可以使用外层函数中定义的变量<br>局部数据共享</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">fun</span>(<span class="params">n, o</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(n, o);</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="attr">fun2</span>: <span class="keyword">function</span> (<span class="params">m</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="title function_">fun</span>(m, n);</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a = <span class="title function_">fun</span>(<span class="number">0</span>); <span class="comment">// ?0</span></span><br><span class="line">a.<span class="title function_">fun2</span>(<span class="number">1</span>); <span class="comment">// ?</span></span><br><span class="line">a.<span class="title function_">fun2</span>(<span class="number">2</span>); <span class="comment">// ?</span></span><br><span class="line">a.<span class="title function_">fun2</span>(<span class="number">3</span>).<span class="title function_">fun2</span>(<span class="number">4</span>); <span class="comment">// ?</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> b = <span class="title function_">fun</span>(<span class="number">0</span>).<span class="title function_">fun2</span>(<span class="number">1</span>).<span class="title function_">fun2</span>(<span class="number">2</span>).<span class="title function_">fun2</span>(<span class="number">3</span>); <span class="comment">// ?</span></span><br><span class="line"><span class="keyword">var</span> c = <span class="title function_">fun</span>(<span class="number">0</span>).<span class="title function_">fun2</span>(<span class="number">1</span>); <span class="comment">// ?</span></span><br><span class="line">c.<span class="title function_">fun2</span>(<span class="number">2</span>); <span class="comment">// ?</span></span><br><span class="line">c.<span class="title function_">fun2</span>(<span class="number">3</span>);</span><br></pre></td></tr></table></figure>

<h3 id="IIFE-匿名函数"><a href="#IIFE-匿名函数" class="headerlink" title="IIFE 匿名函数"></a>IIFE 匿名函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> b = <span class="number">10</span>;</span><br><span class="line">(<span class="keyword">function</span> <span class="title function_">b</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">// 内部作用域，会先去查找是有已有变量b的声明，有就直接赋值20，确实有了呀。发现了具名函数 function b()&#123;&#125;，拿此b做赋值；</span></span><br><span class="line">  <span class="comment">// IIFE的函数无法进行赋值（内部机制，类似const定义的常量），所以无效。</span></span><br><span class="line">  <span class="comment">// （这里说的“内部机制”，想搞清楚，需要去查阅一些资料，弄明白IIFE在JS引擎的工作方式，堆栈存储IIFE的方式等）</span></span><br><span class="line">  b = <span class="number">20</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(b); <span class="comment">// [Function b]</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">window</span>.<span class="property">b</span>); <span class="comment">// 10，不是20</span></span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure>

<h3 id="Memoization"><a href="#Memoization" class="headerlink" title="Memoization"></a>Memoization</h3><blockquote>
<p>算法技巧叫做<code>记忆华搜索</code>，目的:<code>为了减少重复计算</code>,如递归或其他重复计算多的场景适合使用</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 获取函数运行时间</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getTime</span>(<span class="params">fn, ...args</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> now = <span class="title class_">Date</span>.<span class="title function_">now</span>();</span><br><span class="line">  <span class="keyword">const</span> result = fn.<span class="title function_">apply</span>(<span class="literal">null</span>, args);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`用时：<span class="subst">$&#123;<span class="built_in">Date</span>.now() - now&#125;</span>毫秒，结果：<span class="subst">$&#123;result&#125;</span>`</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 斐波那契数列</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">fibonacci</span>(<span class="params">n</span>) &#123;</span><br><span class="line">  <span class="keyword">if</span> (n === <span class="number">0</span>) <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">else</span> <span class="keyword">if</span> (n === <span class="number">1</span>) <span class="keyword">return</span> <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">else</span> <span class="keyword">return</span> <span class="title function_">fibonacci</span>(n - <span class="number">1</span>) + <span class="title function_">fibonacci</span>(n - <span class="number">2</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">getTime</span>(fibonacci, <span class="number">40</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// memoization化斐波那契数列</span></span><br><span class="line"><span class="keyword">const</span> fibonacciWithCache = (<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">// 设置缓存队列</span></span><br><span class="line">  <span class="keyword">const</span> cacheList = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">1</span>, <span class="number">2</span>];</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">function</span> <span class="title function_">_fibonacciWithCache</span>(<span class="params">n</span>) &#123;</span><br><span class="line">    <span class="comment">// 如果缓存队列中没有该运算结果，则计算出结果并加入缓存队列中</span></span><br><span class="line">    <span class="keyword">if</span> (!cacheList[n])</span><br><span class="line">      cacheList[n] = <span class="title function_">_fibonacciWithCache</span>(n - <span class="number">1</span>) + <span class="title function_">_fibonacciWithCache</span>(n - <span class="number">2</span>);</span><br><span class="line">    <span class="keyword">return</span> cacheList[n];</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;)();</span><br><span class="line"></span><br><span class="line"><span class="title function_">getTime</span>(fibonacciWithCache, <span class="number">40</span>);</span><br></pre></td></tr></table></figure>

<ul>
<li>两者对比<br>用时：2830 毫秒，结果：102334155<br>用时：0 毫秒，结果：102334155</li>
</ul>
<h3 id="URI-URL-URN"><a href="#URI-URL-URN" class="headerlink" title="URI URL URN"></a>URI URL URN</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * URI = Uniform Resource Identifier 统一资源标志符</span></span><br><span class="line"><span class="comment"> *      定位方式表示 URL</span></span><br><span class="line"><span class="comment"> *          URL = Uniform Resource Locator 统一资源定位符</span></span><br><span class="line"><span class="comment"> *      名字方式表示 URN</span></span><br><span class="line"><span class="comment"> *          URN = Uniform Resource Name 统一资源名称</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * /</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">// 去村子找个具体的人（URI），如果用地址：某村多少号房子第几间房的主人 就是URL， 如果用身份证号+名字 去找就是URN了。</span></span><br><span class="line"><span class="comment">// 原来uri包括url和urn，后来urn没流行起来，导致几乎目前所有的uri都是url</span></span><br></pre></td></tr></table></figure>

<h3 id="柯里化、偏函数、Compose、Pipe"><a href="#柯里化、偏函数、Compose、Pipe" class="headerlink" title="柯里化、偏函数、Compose、Pipe"></a>柯里化、偏函数、Compose、Pipe</h3><blockquote>
<p>收集函数多次调用的参数了列表</p>
</blockquote>
<ul>
<li>作用<ul>
<li>参数复用<ul>
<li>就是利用闭包的原理，让我们前面传输过来的参数不要被释放掉</li>
</ul>
</li>
<li>提前确认</li>
<li>延迟运行</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 固定参数类型，函数柯里化</span></span><br><span class="line"><span class="comment"> * 关键利用闭包的特性保存每次调用参数个数</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> &#123;<span class="type">*</span>&#125; <span class="variable">func</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span>  &#123;<span class="type">...any</span>&#125; <span class="variable">args</span></span></span><br><span class="line"><span class="comment"> * <span class="doctag">@returns</span></span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">curry</span> = (<span class="params">func, ...args</span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">// 获取函数的参数个数,不调用</span></span><br><span class="line">  <span class="keyword">const</span> fnLen = func.<span class="property">length</span>;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//利用闭包与递归收集所有小括号参数个数,如果func参数列表用到的少，后面的小括号都是白写</span></span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">function</span> (<span class="params">...innerArgs</span>) &#123;</span><br><span class="line">    <span class="comment">// 每个小括号调用的参数...innerArgs加上前面调用过储存的参数，拿来与func的参数比较</span></span><br><span class="line">    innerArgs = args.<span class="title function_">concat</span>(innerArgs);</span><br><span class="line">    <span class="comment">// 参数未搜集足的话，继续递归搜集</span></span><br><span class="line">    <span class="keyword">if</span> (innerArgs.<span class="property">length</span> &lt; fnLen) &#123;</span><br><span class="line">      <span class="keyword">return</span> curry.<span class="title function_">call</span>(<span class="variable language_">this</span>, func, ...innerArgs); <span class="comment">//...innerArgs至少从第二个小阔号调用开始</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      <span class="comment">// 否则拿着搜集的参数调用func,这时开始调用func回调</span></span><br><span class="line">      func.<span class="title function_">call</span>(<span class="variable language_">this</span>, innerArgs);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 测试</span></span><br><span class="line"><span class="keyword">const</span> add = <span class="title function_">curry</span>(<span class="function">(<span class="params">num1, num2, num3</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(num1);</span><br><span class="line">  <span class="comment">// console.log(num1, num2, num3, num1 + num2 + num3);</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="title function_">add</span>(<span class="number">1</span>)(<span class="number">2</span>)(<span class="number">3</span>); <span class="comment">// 1 2 3 6</span></span><br><span class="line"><span class="title function_">add</span>(<span class="number">1</span>, <span class="number">2</span>)(<span class="number">3</span>); <span class="comment">// 1 2 3 6</span></span><br><span class="line"><span class="title function_">add</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>); <span class="comment">// 1 2 3 6</span></span><br><span class="line"><span class="title function_">add</span>(<span class="number">1</span>)(<span class="number">2</span>, <span class="number">3</span>); <span class="comment">// 1 2 3 6</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//============================================</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">curry2</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">// 第一次执行时，定义一个数组专门用来存储所有的参数</span></span><br><span class="line">  <span class="keyword">var</span> _args = <span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>);</span><br><span class="line"></span><br><span class="line">  <span class="comment">//arguments类数组Array.prototype.slice.call(arguments)将有length的对象转数组</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>.<span class="property">length</span>);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值</span></span><br><span class="line">  <span class="keyword">var</span> _adder = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    _args.<span class="title function_">push</span>(...<span class="variable language_">arguments</span>);</span><br><span class="line">    <span class="keyword">return</span> _adder; <span class="comment">//第二次调用执行_adder，返回_adder给第三次执行用</span></span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回</span></span><br><span class="line">  _adder.<span class="property">toString</span> = <span class="keyword">function</span> (<span class="params">func</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title function_">func</span>(_args);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//外部回调操作</span></span><br><span class="line">  _adder.<span class="property">toString1</span> = <span class="keyword">function</span> (<span class="params">callback</span>) &#123;</span><br><span class="line">    <span class="title function_">callback</span>(_args);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//将内部函数返回出去</span></span><br><span class="line">  <span class="keyword">return</span> _adder; <span class="comment">//第一次调用curry2执行得到_adder函数</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//获取操作列表自定义函数操作</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">func</span>(<span class="params">_args</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">    _args.<span class="title function_">reduce</span>(<span class="keyword">function</span> (<span class="params">a, b</span>) &#123;</span><br><span class="line">      <span class="keyword">return</span> a + b;</span><br><span class="line">    &#125;)</span><br><span class="line">  );</span><br><span class="line">&#125;</span><br><span class="line"><span class="title function_">curry2</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>)(<span class="number">4</span>)(<span class="number">9</span>).<span class="title function_">toString</span>(func);</span><br><span class="line"></span><br><span class="line"><span class="title function_">curry2</span>(</span><br><span class="line">  <span class="number">1</span>,</span><br><span class="line">  <span class="number">2</span>,</span><br><span class="line">  <span class="number">3</span></span><br><span class="line">)(<span class="number">4</span>)(<span class="number">9</span>).<span class="title function_">toString1</span>(<span class="function">(<span class="params">list</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(list);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="函数式编程的纯函数与副作用"><a href="#函数式编程的纯函数与副作用" class="headerlink" title="函数式编程的纯函数与副作用"></a>函数式编程的纯函数与副作用</h3><h3 id="JS-的内存管理"><a href="#JS-的内存管理" class="headerlink" title="JS 的内存管理"></a>JS 的内存管理</h3><blockquote>
<p>本质上讲, 内存泄露就是不再被需要的内存, 由于某种原因, 无法被释放.<br>JS 中, 没隐藏了内存管理功能,有专门的内存管理接口, 所有的内存管理都是”自动”的. JS 在创建变量时, 自动分配内存, 并在不使用的时候, 自动释放. 这种”自动”的内存回收, 造成了很多 JS 开发者并不关心内存回收<br>全局变量引用的空间需要程序结束才能是否，局部变量指向的空间，需要改作用域执行完后自动释放</p>
</blockquote>
<blockquote>
<p>对象是否不再需要(没有任何变量指向的对象)</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line">arr = <span class="literal">null</span>; <span class="comment">//手动赋值null， [1,2,3,4]这时没有被引用, 会被自动回收</span></span><br></pre></td></tr></table></figure>

<h3 id="JS-耗性能操作与时间复杂度"><a href="#JS-耗性能操作与时间复杂度" class="headerlink" title="JS 耗性能操作与时间复杂度"></a>JS 耗性能操作与时间复杂度</h3><h3 id="事件对象鼠标位置"><a href="#事件对象鼠标位置" class="headerlink" title="事件对象鼠标位置"></a>事件对象鼠标位置</h3><blockquote>
<p>事件对象 clientX、screenX、pageX、offsetX、layerX、movementX 的差别</p>
</blockquote>
<h3 id="所有浏览器-userAgent-都是-Mozilla"><a href="#所有浏览器-userAgent-都是-Mozilla" class="headerlink" title="所有浏览器 userAgent 都是 Mozilla?"></a>所有浏览器 userAgent 都是 Mozilla?</h3><blockquote>
<p>最初浏览器 NCSA Mosaic，简称 Mosaic,<br>后面出现另外一款浏览器 Mozilla( Mosaic + Killer)，–&gt; Mozilla 更名为 Netscape，也就是网景<br><code>网站管理员探测 user agent，对 Mozilla 浏览器发送含有框架的页面，对非 Mozilla 浏览器发送没有框架的页面。</code><br>后面软开发了自己的浏览器，Internet Explorer –&gt; (开始只有 Mozilla 支持框架（frame），为了快速收到含有框架的页面了)微软宣布 IE 是兼容 Mozilla，并且模仿 Netscape 称 IE 为“Mozilla&#x2F;1.22“<br>后面微软与网景的浏览器大众，网景失败退出<br>Netscape 居然以 Mozilla(后面更名 Firefox)的名义重生了，并且开发了 <code>Gecko渲染引擎</code>（Mozilla&#x2F;5.0(Windows; U; Windows NT 5.0; en-US; rv:1.1) Gecko&#x2F;20020826）<br>Mozilla 后来变成了 Firefox，并自称“Mozilla&#x2F;5.0 (Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko&#x2F;20041108 Firefox&#x2F;1.0”<br>很多浏览器使用了它的代码，每一个都将自己装作 Mozilla，而它们全都使用 Gecko。<br><code>Gecko 很出色,因此 user agent 探测规则变了，使用 Gecko 的浏览器被发送了更好的代码</code><br>linux Konqueror 浏览器<code>KHTML渲染引擎</code> 伪装 Gecko <code>like Gecko</code>(Mozilla&#x2F;5.0 (compatible; Konqueror&#x2F;3.2; FreeBSD) (KHTML, like Gecko))<br>Opera<br>后来苹果开发了 Safari 浏览器，并使用 KHTML 作为渲染引擎<br>但苹果加入了许多新的特性，于是苹果从 KHTML 另辟分支称之为 <code>WebKit</code><br>但它又不想抛弃那些为 KHTML 编写的页面，于是 Safari 自称为“Mozilla&#x2F;5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit&#x2F;85.7 (KHTML, like Gecko) Safari&#x2F;85.5”<br>再后来，谷歌开发了 Chrome 浏览器，Chrome 使用 Webkit 作为渲染引擎(后面渲染引擎改用 Blink(基于 Webkit 开发)，V8 是 js 引擎不是渲染引擎)<br>和 Safari 之前一样，它想要那些为 Safari 编写的页面，于是它伪装成了 Safari<br>于是 Chrome 使用 WebKit，并将自己伪装成 Safari，WebKit 伪装成 KHTML，KHTML 伪装成 Gecko，最后所有的浏览器都伪装成了 Mozilla<br><code>因为网站开发者可能会因为你是某浏览器（这里是 Mozilla），所以输出一些特殊功能的程序代码（这里指好的特殊功能），所以当其它浏览器也支持这种好功能时，就试图去模仿 Mozilla 浏览器让网站输出跟 Mozilla 一样的内容，而不是输出被阉割功能的程序代码。大家都为了让网站输出最好的内容，都试图假装自己是 Mozilla，一个已经不存在的浏览器……</code></p>
</blockquote>
<ul>
<li><p>浏览器内核也叫”渲染引擎”，用来接收网页语法并渲染到页面上。内核绝对了浏览器如何显示网页，以及格式</p>
<ul>
<li>比如不同浏览器初始化都会有 margin padding,有的默认没有</li>
</ul>
</li>
<li><p>渲染引擎之间关系(内核也叫做排版引擎、渲染引擎、浏览器引擎等)</p>
<ul>
<li>Gecko 壁虎 (Firefox)</li>
<li>KHTML(linux Konqueror)</li>
<li>KHTML –&gt; Webkit(Safari、移动端浏览器)</li>
<li>KHTML –&gt; Webkit –&gt; Blink(chrome)</li>
<li>Presto 急板乐曲(欧鹏) -&gt; 欧鹏 Presto 后期被 Blink 代替</li>
<li>Trident 三叉戟 (IE 360 搜狗 百度 uc)</li>
<li>EdgeHTML(Edge 浏览器) –&gt; 后期被 Blink 代替</li>
</ul>
</li>
</ul>
<h3 id="禁止通过控制台查看代码"><a href="#禁止通过控制台查看代码" class="headerlink" title="禁止通过控制台查看代码"></a>禁止通过控制台查看代码</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//https://www.mk2048.com/blog/blog_hjjahikh2hjaa.html</span></span><br><span class="line"><span class="keyword">var</span> forbidDebug = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    (<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">var</span> callbacks = [],</span><br><span class="line">        timeLimit = <span class="number">50</span>,</span><br><span class="line">        open = <span class="literal">false</span>;</span><br><span class="line">      <span class="built_in">setInterval</span>(loop, <span class="number">1</span>);</span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="attr">addListener</span>: <span class="keyword">function</span> (<span class="params">fn</span>) &#123;</span><br><span class="line">          callbacks.<span class="title function_">push</span>(fn);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">cancleListenr</span>: <span class="keyword">function</span> (<span class="params">fn</span>) &#123;</span><br><span class="line">          callbacks = callbacks.<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">v</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> v !== fn;</span><br><span class="line">          &#125;);</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">function</span> <span class="title function_">loop</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="comment">// alert(&#x27;=======================================&#x27;)</span></span><br><span class="line">        <span class="keyword">var</span> startTime = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line">        <span class="keyword">debugger</span>;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">new</span> <span class="title class_">Date</span>() - startTime &gt; timeLimit) &#123;</span><br><span class="line">          <span class="keyword">if</span> (!open) &#123;</span><br><span class="line">            callbacks.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">fn</span>) &#123;</span><br><span class="line">              fn.<span class="title function_">call</span>(<span class="literal">null</span>);</span><br><span class="line">            &#125;);</span><br><span class="line">          &#125;</span><br><span class="line">          open = <span class="literal">true</span>;</span><br><span class="line">          <span class="variable language_">window</span>.<span class="title function_">stop</span>();</span><br><span class="line">          <span class="title function_">alert</span>(<span class="string">&quot;扒的话，劳烦您尊重一下劳动成果！&quot;</span>);</span><br><span class="line">          <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">innerHTML</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          open = <span class="literal">false</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)().<span class="title function_">addListener</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">window</span>.<span class="property">location</span>.<span class="title function_">reload</span>();</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125; <span class="keyword">catch</span> (e) &#123;&#125;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">onkeydown</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">var</span> e = <span class="variable language_">window</span>.<span class="property">event</span> || <span class="variable language_">arguments</span>[<span class="number">0</span>];</span><br><span class="line">      <span class="keyword">if</span> (e.<span class="property">keyCode</span> == <span class="number">123</span>) &#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&quot;扒的话，劳烦您尊重一下劳动成果2！&quot;</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (e.<span class="property">ctrlKey</span> &amp;&amp; e.<span class="property">shiftKey</span> &amp;&amp; e.<span class="property">keyCode</span> == <span class="number">73</span>) &#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&quot;扒的话，劳烦您尊重一下劳动成果2！&quot;</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (e.<span class="property">ctrlKey</span> &amp;&amp; e.<span class="property">keyCode</span> == <span class="number">85</span>) &#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&quot;扒的话，劳烦您尊重一下劳动成果4！&quot;</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">      &#125; <span class="keyword">else</span> <span class="keyword">if</span> (e.<span class="property">ctrlKey</span> &amp;&amp; e.<span class="property">keyCode</span> == <span class="number">83</span>) &#123;</span><br><span class="line">        <span class="title function_">alert</span>(<span class="string">&quot;扒的话，劳烦您尊重一下劳动成果5！&quot;</span>);</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125; <span class="keyword">catch</span> (e) &#123;&#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="title function_">forbidDebug</span>();</span><br><span class="line"></span><br><span class="line"><span class="comment">//==========================第一次输入密码查看======</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">forbidDebug</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> intarv = <span class="literal">null</span>;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    (<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">var</span> callbacks = [],</span><br><span class="line">        timeLimit = <span class="number">50</span>,</span><br><span class="line">        open = <span class="literal">false</span>;</span><br><span class="line">      intarv = <span class="built_in">setInterval</span>(loop, <span class="number">3000</span>);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">return</span> &#123;</span><br><span class="line">        <span class="attr">addListener</span>: <span class="keyword">function</span> (<span class="params">fn</span>) &#123;</span><br><span class="line">          callbacks.<span class="title function_">push</span>(fn);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">cancleListenr</span>: <span class="keyword">function</span> (<span class="params">fn</span>) &#123;</span><br><span class="line">          callbacks = callbacks.<span class="title function_">filter</span>(<span class="keyword">function</span> (<span class="params">v</span>) &#123;</span><br><span class="line">            <span class="keyword">return</span> v !== fn;</span><br><span class="line">          &#125;);</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;;</span><br><span class="line"></span><br><span class="line">      <span class="keyword">function</span> <span class="title function_">loop</span>(<span class="params"></span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> startTime = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="number">1</span>);</span><br><span class="line">        <span class="keyword">debugger</span>;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">new</span> <span class="title class_">Date</span>() - startTime &gt; timeLimit) &#123;</span><br><span class="line">          <span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="title function_">prompt</span>(<span class="string">&quot;请输入密码&quot;</span>) == <span class="number">1</span>) &#123;</span><br><span class="line">            <span class="comment">//右键进入</span></span><br><span class="line">            <span class="built_in">clearInterval</span>(intarv);</span><br><span class="line">            open = <span class="literal">false</span>;</span><br><span class="line">            <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&quot;console&quot;</span>, <span class="string">&quot;xxxx&quot;</span>);</span><br><span class="line">          &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (!open) &#123;</span><br><span class="line">              callbacks.<span class="title function_">forEach</span>(<span class="keyword">function</span> (<span class="params">fn</span>) &#123;</span><br><span class="line">                fn.<span class="title function_">call</span>(<span class="literal">null</span>);</span><br><span class="line">              &#125;);</span><br><span class="line">            &#125;</span><br><span class="line">            open = <span class="literal">true</span>;</span><br><span class="line">            <span class="variable language_">window</span>.<span class="title function_">stop</span>();</span><br><span class="line">            <span class="title function_">alert</span>(<span class="string">&quot;请您尊重一下劳动成果！&quot;</span>);</span><br><span class="line">            <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">innerHTML</span> = <span class="string">&quot;&quot;</span>;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          open = <span class="literal">false</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)().<span class="title function_">addListener</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="variable language_">window</span>.<span class="property">location</span>.<span class="title function_">reload</span>();</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125; <span class="keyword">catch</span> (e) &#123;&#125;</span><br><span class="line">  <span class="keyword">try</span> &#123;</span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">onkeydown</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">      <span class="keyword">var</span> e = <span class="variable language_">window</span>.<span class="property">event</span> || <span class="variable language_">arguments</span>[<span class="number">0</span>];</span><br><span class="line">      <span class="keyword">if</span> (</span><br><span class="line">        e.<span class="property">keyCode</span> == <span class="number">123</span> ||</span><br><span class="line">        (e.<span class="property">ctrlKey</span> &amp;&amp; e.<span class="property">shiftKey</span> &amp;&amp; e.<span class="property">keyCode</span> == <span class="number">73</span>) ||</span><br><span class="line">        (e.<span class="property">ctrlKey</span> &amp;&amp; e.<span class="property">keyCode</span> == <span class="number">85</span>) ||</span><br><span class="line">        (e.<span class="property">ctrlKey</span> &amp;&amp; e.<span class="property">keyCode</span> == <span class="number">83</span>)</span><br><span class="line">      ) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="variable language_">window</span>.<span class="title function_">prompt</span>(<span class="string">&quot;请输入密码&quot;</span>) == <span class="number">1</span>) &#123;</span><br><span class="line">          <span class="built_in">clearInterval</span>(intarv);</span><br><span class="line">          open = <span class="literal">false</span>;</span><br><span class="line">          <span class="variable language_">localStorage</span>.<span class="title function_">setItem</span>(<span class="string">&quot;console&quot;</span>, <span class="string">&quot;xxxx&quot;</span>);</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">          <span class="title function_">alert</span>(<span class="string">&quot;请您尊重一下劳动成果！&quot;</span>);</span><br><span class="line">          <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">      <span class="comment">// else if (e.ctrlKey &amp;&amp; e.shiftKey &amp;&amp; e.keyCode == 73) &#123;</span></span><br><span class="line">      <span class="comment">//     alert(&quot;禁止打开控制台&quot;);</span></span><br><span class="line">      <span class="comment">//     return false;</span></span><br><span class="line">      <span class="comment">// &#125;</span></span><br><span class="line">      <span class="comment">// else if (e.ctrlKey &amp;&amp; e.keyCode == 85) &#123;</span></span><br><span class="line">      <span class="comment">//     alert(&quot;禁止查看源码页面&quot;);</span></span><br><span class="line">      <span class="comment">//     return false;</span></span><br><span class="line">      <span class="comment">// &#125;</span></span><br><span class="line">      <span class="comment">// else if (e.ctrlKey &amp;&amp; e.keyCode == 83) &#123;</span></span><br><span class="line">      <span class="comment">//     alert(&quot;禁止下载页面&quot;);</span></span><br><span class="line">      <span class="comment">//     return false;</span></span><br><span class="line">      <span class="comment">// &#125;</span></span><br><span class="line">    &#125;;</span><br><span class="line">  &#125; <span class="keyword">catch</span> (e) &#123;&#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">if</span> (<span class="variable language_">localStorage</span>.<span class="title function_">getItem</span>(<span class="string">&quot;console&quot;</span>) != <span class="string">&quot;xxxx&quot;</span>) &#123;</span><br><span class="line">  <span class="title function_">forbidDebug</span>();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="Date-详解"><a href="#Date-详解" class="headerlink" title="Date 详解"></a>Date 详解</h3><blockquote>
<p><strong>lzo-web-project\JavaScript\ECMAScript\Date\index.js</strong></p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//===========================基本操作======================================</span></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * ISO 8601 国际标准化组织的国际标准ISO 8601是日期和时间的表示方法（1998、2000、2004等版本）</span></span><br><span class="line"><span class="comment"> * GMT（格林尼治标准时间）是一些欧洲和非洲国家正式使用的时间，</span></span><br><span class="line"><span class="comment"> * UTC（是国际标准）这两个时间一般情况是相等的</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * Thu Nov 04 2021 08:00:00 GMT+0800 (中国标准时间) 指 中国标准时间是格林尼治标准时间 + 8小时(偏移量)</span></span><br><span class="line"><span class="comment"> * UTC或GMT 时间00:00:00的时候，我们的时间是08:00:00</span></span><br><span class="line"><span class="comment"> * IOS上执行new Date(&#x27;1990-01-04&#x27;)会得到invilaid date。处理方法是对1990-01-04转换成1990/01/04的格式</span></span><br><span class="line"><span class="comment"> * Thu Nov 04 2021 10:10:10 GMT+0800 (中国标准时间) 等同于UTC时间 2021-11-04T02:10:10.000Z (T指UTC时间)</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//new Date 里的参数默认中国标准时间</span></span><br><span class="line"><span class="keyword">let</span> <span class="title class_">NewDate</span> = <span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;2021-11-04&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;===============日期基础===================&quot;</span>);</span><br><span class="line"><span class="comment">//浏览器运行结果</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;2021-11-04&quot;</span>)); <span class="comment">//Thu Nov 04 2021 08:00:00 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>()); <span class="comment">//Thu Nov 04 2021 16:05:58 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="number">1636013291302</span>)); <span class="comment">//Thu Nov 04 2021 16:08:11 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;Thu Nov 04 2021 16:08:11 GMT+0800&quot;</span>)); <span class="comment">//Thu Nov 04 2021 16:08:11 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;2021-11-04T10:10:10&quot;</span>)); <span class="comment">//Thu Nov 04 2021 10:10:10 GMT+0800 (中国标准时间)</span></span><br><span class="line"><span class="comment">//node运行 (ISO 8601)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;2021-11-04T10:10:10&quot;</span>)); <span class="comment">//2021-11-04T02:10:10.000Z</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取当前时间(从格林威治1970.1.1 00:00:00 [国内 1970.1.1 08:00:00] 开始的毫秒数)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getTime</span>(), +<span class="keyword">new</span> <span class="title class_">Date</span>(), <span class="title class_">Date</span>.<span class="title function_">now</span>()); <span class="comment">// 三种方式</span></span><br><span class="line"><span class="comment">//获取当前毫秒数(0-999)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getMilliseconds</span>());</span><br><span class="line"><span class="comment">//获取一分钟后的毫秒数目</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="keyword">new</span> <span class="title class_">Date</span>() + <span class="number">60000</span>).<span class="title function_">getTime</span>());</span><br><span class="line"><span class="comment">//获取星期</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getDay</span>());</span><br><span class="line"></span><br><span class="line"><span class="comment">//方法返回指定日期在月中的第几天（从 1 到 31）。</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">getDate</span>(), <span class="string">&quot;getDate&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;2021-11-05 07:59:59&quot;</span>).<span class="title function_">getUTCDate</span>(), <span class="string">&quot;getUTCDate&quot;</span>); <span class="comment">//中国标准上午八点之前，获取到的是前一天</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//getUTCHours 与 getHours</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;2021-11-05 08:00:00&quot;</span>).<span class="title function_">getHours</span>(), <span class="string">&quot;getHours&quot;</span>); <span class="comment">//8</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>(<span class="string">&quot;2021-11-05 08:00:00&quot;</span>).<span class="title function_">getUTCHours</span>(), <span class="string">&quot;getUTCDate&quot;</span>); <span class="comment">//0</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;===============end===================&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//====================通过Date方法获取日期时间格式===========================</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> * 功能:返回时间</span></span><br><span class="line"><span class="comment"> * 描述:date.toTimeString         // 11:19:44 GMT+0800 (中国标准时间,24小时制)</span></span><br><span class="line"><span class="comment"> *	console.log(new Date(1597894083000).toLocaleString())      // 2020/8/20 上午11:26:29</span></span><br><span class="line"><span class="comment"> *	console.log(new Date().toLocaleTimeString()) //下午3:23:14</span></span><br><span class="line"><span class="comment"> *	console.log(new Date(1597894083000).toLocaleDateString())  // 2020/8/20</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//获取24制小时</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">getTimeFromDate</span> = (<span class="params">date</span>) =&gt; date.<span class="title function_">toTimeString</span>().<span class="title function_">slice</span>(<span class="number">0</span>, <span class="number">8</span>);</span><br><span class="line"><span class="keyword">let</span> time1 = <span class="title function_">getTimeFromDate</span>(<span class="keyword">new</span> <span class="title class_">Date</span>()); <span class="comment">// 09:46:08</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;========转换输出格式=============&quot;</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toLocaleString</span>()); <span class="comment">//2021/11/5 上午11:50:41</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toLocaleTimeString</span>()); <span class="comment">//上午11:50:41</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toLocaleDateString</span>()); <span class="comment">//2021/11/5</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toISOString</span>()); <span class="comment">//转ISO标准，日期格式 2021-11-05T03:47:35.756Z</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toUTCString</span>()); <span class="comment">//Fri, 05 Nov 2021 03:45:22 GMT (推荐)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toGMTString</span>()); <span class="comment">//Fri, 05 Nov 2021 03:45:22 GMT (不推荐)</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toString</span>()); <span class="comment">//中国标准时间(默认)</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toTimeString</span>()); <span class="comment">//中国标准时间后半部分</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>().<span class="title function_">toDateString</span>()); <span class="comment">//中国标准时间日期部分</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;========end=============&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="Number"><a href="#Number" class="headerlink" title="Number"></a>Number</h3><blockquote>
<p>1.IEEE754 标准中的 “双精度浮点数” 来表示一个数字，不区分整数和浮点数。 2.有效数值默认总是 1，不保存在 64 位之中，也就是说，有效数字总是 1.xxxx 的形式，其中 xxxx 的部分保存在 64 位浮点数之中，最长可能位 52 位</p>
</blockquote>
<h4 id="Number-MAX-VALUE"><a href="#Number-MAX-VALUE" class="headerlink" title="Number.MAX_VALUE"></a>Number.MAX_VALUE</h4><blockquote>
<p>js number 表示的最大值 <code>Number.MAX_VALUE == (2**53 - 1)*(2**971)</code>,52 是浮点数部分 1 是整数默认部分<br>IEEE754 标准的双精度 64 &#x3D; <code>sign bit（符号1）</code> + <code>exponent（指数11）</code>+ <code>mantissa（尾数52）</code></p>
</blockquote>
<ul>
<li>Number.MAX_VALUE 运算过程<ul>
<li>11 位指数为(2^0~2^10 &#x3D;&gt; 2^11-1 &#x3D;&gt; 2047)</li>
<li>IEEE 标准需要 1023 偏移量(除了最高位其他全为 1 的时)</li>
<li>默认整数位 1+52 位浮点数<ul>
<li><code>1.1111111111111111111111111111111111111111111111111111 * 2^(2046 - 1023)</code>，[0 到 2046 次]</li>
<li><code>1.1111111111111111111111111111111111111111111111111111 * 2^1023</code></li>
<li><code>11111111111111111111111111111111111111111111111111111 * 2^(1023-52)</code></li>
<li><code>(2**53 - 1)*2^971</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="Number-MAX-SAFE-INTEGER"><a href="#Number-MAX-SAFE-INTEGER" class="headerlink" title="Number.MAX_SAFE_INTEGER"></a>Number.MAX_SAFE_INTEGER</h4><blockquote>
<p>最大安全整数，就是大于这个数的整数不一定可以精确表示 <code>Number.MAX_SAFE_INTEGER == 2**53-1</code><br>Number.MAX_SAFE_INTEGER+1 &#x3D;&#x3D; Number.MAX_SAFE_INTEGER+2 &#x2F;&#x2F;true</p>
</blockquote>
<h4 id="0-1-0-2-0-3"><a href="#0-1-0-2-0-3" class="headerlink" title="0.1+0.2!&#x3D;0.3"></a>0.1+0.2!&#x3D;0.3</h4><blockquote>
<p>运算时将目标转成二进制进行运算，这两个转二进制都是无限循环<br>而存储结构中的尾数部分最多只能表示 53 位。为了能表示 0.1，只能模仿十进制进行四舍五入了，但二进制只有 0 和 1 ， 于是变为 0 舍 1 入 。<br>通过进制的加法运算后的二进制重新转十进制，有些情况就产生了偏差</p>
</blockquote>
<h3 id="进制"><a href="#进制" class="headerlink" title="进制"></a>进制</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment">  * 十进制:100  (逢10进1，最高位9   从0到9都是一位，10 变两位，进1，自生变0)</span></span><br><span class="line"><span class="comment">  *   </span></span><br><span class="line"><span class="comment">  *   转二进制</span></span><br><span class="line"><span class="comment">  *     除二取余数，从下往上，就是二进制的从左到右</span></span><br><span class="line"><span class="comment">  *     (100).toString(2)</span></span><br><span class="line"><span class="comment">  *   转十进制</span></span><br><span class="line"><span class="comment">  *     (0x64).toString(10);</span></span><br><span class="line"><span class="comment">  *     Number(0x64)</span></span><br><span class="line"><span class="comment">  * 二进制（0b）:01100100</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * 八进制(0o|0 ):01 100 100 =&gt; 144 </span></span><br><span class="line"><span class="comment">  *  占三位 最大值1+2+4 = 7</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">  * 十六进制(0x):0110 0100 =&gt; 64</span></span><br><span class="line"><span class="comment">  *  占四位 最大值1+2+4+8 =15 </span></span><br><span class="line"><span class="comment">  *  颜色值六个十六进制占三个字节24位 =&gt; #ffffff =&gt; rgb(0b11111111,0b11111111,0b11111111) 所以范围是0-255,所以三个字节的颜色拥有256*256*256种颜色</span></span><br><span class="line"><span class="comment">  *</span></span><br><span class="line"><span class="comment">  *  十六位能放多大的十进制数字?</span></span><br><span class="line"><span class="comment">  *     (2**0)+(2**1)+(2**2)+(2**3)+(2**4)+(2**5)+(2**6)+(2**7)+(2**8)+(2**9)+(2**10)+(2**11)+(2**12)+(2**13)+(2**14)+(2**15)</span></span><br><span class="line"><span class="comment">  *     1 2 4 8....   = 65535</span></span><br><span class="line"><span class="comment">  *     或 最大四位十六进制转十进制 (0xffff).toString(10) =  = 65535</span></span><br><span class="line"><span class="comment">  *     4个字节32位最大能存多少  (0xFFFFFFFF).toString(10) = 4294967295 </span></span><br><span class="line"><span class="comment">  *     1kb = 1024字节 = 8192位 = 可以储存 1111 1111 1111 1111 ... 的这种二进制8192个</span></span><br><span class="line"><span class="comment">  *</span></span><br><span class="line"><span class="comment">  *  一个字符如何转为二进制?</span></span><br><span class="line"><span class="comment">  *     可以说每个字符都有对应的二进制编号</span></span><br><span class="line"><span class="comment">  *     基础字符在ascii表有对应的编号，比如 字符A，表中对应二进制 01000001 ,转 二进制就是65了</span></span><br><span class="line"><span class="comment">  *  </span></span><br><span class="line"><span class="comment">  *   二进制为什么可以显示位画面?</span></span><br><span class="line"><span class="comment">  *     屏幕画面是由一个个非常微小的像素的组成，每个像素点是有rgb三基色组成，红、绿、蓝的范围都是0-255，8位的二进制</span></span><br><span class="line"><span class="comment">  */</span></span><br></pre></td></tr></table></figure>

<h4 id="原码、反码、补码"><a href="#原码、反码、补码" class="headerlink" title="原码、反码、补码"></a>原码、反码、补码</h4><ul>
<li>十进制转二进制原码，最高位是<code>符号位</code>,0 为正，1 为负</li>
<li>原码转反码<ul>
<li><code>正数(最高位为0的) 原码就是反码</code></li>
<li><code>负数(最高位为1的) 符号位不变，其余取反</code><ul>
<li>如果<code>定义为有符号数值的类型</code>为四个字节，那么最高位就是第 32 位</li>
</ul>
</li>
</ul>
</li>
<li>反码转成补码 - <code>正数(最高位为0的) 原码还是补码</code> - <code>负数(最高位为1的) 补码就是在反码的基础上+1</code><!-- 二进制间运算先要转成补码，得到结果再转回原码 --></li>
</ul>
<h4 id="小数的二进制"><a href="#小数的二进制" class="headerlink" title="小数的二进制"></a>小数的二进制</h4><blockquote>
<p>公式: *2 如果&lt;1 就为 0，基数&#x3D;基数；大于 1,就为 1,基数&#x3D;基数-1，直至小数点后为 0</p>
</blockquote>
<ul>
<li><code>0.6</code><ul>
<li>0.6*2 &#x3D;&gt; 1.2 1</li>
<li>0.2*2 &#x3D;&gt; 0.4 0</li>
<li>0.4*2 &#x3D;&gt; 0.8 0</li>
<li>0.8*2 &#x3D;&gt; 1.6 1</li>
<li>0.6*2 &#x3D;&gt; 1.2 1 0.100110011001….无限循环</li>
</ul>
</li>
</ul>
<h4 id="位运算符"><a href="#位运算符" class="headerlink" title="位运算符"></a>位运算符</h4><ul>
<li><p><code>+</code></p>
<ul>
<li>在计算机中，<code>负数</code>以原码的<code>补码形式</code>表达(负数绝对值原码最高位变 1&#x3D;&gt;除最高位取反&#x3D;&gt;+1)</li>
<li><code>3 + 8</code><ul>
<li><code>0000 0011</code> + <code>0000 1000</code> &#x3D; <code>0000 1011</code> &#x3D;&gt; <code>11</code>;</li>
</ul>
</li>
<li><code>3 + (-8)</code><ul>
<li>正数补码 + 负数补码 &#x3D; 负数补码 &#x3D;&gt; 转原码 &#x3D; 转十进制</li>
<li><code>0000 0011</code> + <code>(1000 1000 =&gt; 1111 0111 =&gt; 1111 1000)</code> &#x3D; <code>1111 1011</code> &#x3D;(负转原 减 1 取反)&#x3D;&gt; <code>1000 0101</code> &#x3D; -5</li>
</ul>
</li>
<li><code>3 + (-1)</code><ul>
<li><code>0000 0011</code> + <code>(1000 0001 =&gt; 1111 1110 =&gt; 1111 1111)</code> &#x3D; <code>0000 0010</code> &#x3D;(正转原)&#x3D;&gt; <code>0000 0010</code> &#x3D; 2</li>
</ul>
</li>
</ul>
</li>
<li><p><code>3 &lt;&lt; 8</code> : 按位左移动 &#x3D;&#x3D;&gt; 3*(2^8)</p>
<ul>
<li>将 3 转为二进制，再整体向左移动八位(右边添加 8 个 0)</li>
<li>程序中运算结果会将移动好的二进制再转十进制显示，<code>(3 &lt;&lt; 8).toString(2)</code> 可以还原</li>
<li>(3 &lt;&lt; 8) &#x3D;&#x3D; 0011 0000 0000</li>
</ul>
</li>
<li><p><code>3 &gt;&gt; 8</code> : 按位右移动,,则高位补 0,若为负数,则高位补 1（&gt;&gt;&gt; 无符号右移，不论正负最高位都补 0）</p>
<ul>
<li>将 3 转为二进制，再整体从右边删除八位</li>
<li>(3 &gt;&gt; 1) &#x3D;&#x3D; 0001</li>
</ul>
</li>
<li><p><code>|</code>: 按位或</p>
<ul>
<li>相同位相加 不为 0 则为 1</li>
</ul>
</li>
<li><p><code>&amp;</code>：按位与</p>
<ul>
<li>相同位都为 1 则为 1</li>
</ul>
</li>
<li><p><code>^</code>：按位异或</p>
<ul>
<li>相同为零不同为一</li>
</ul>
</li>
<li><p><code>~5</code>:按位取反</p>
<ul>
<li><p>规则 <code>转数值原码</code> &#x3D;&gt; <code>转反码</code> &#x3D;&gt; <code>转补码</code> &#x3D;&gt; <code>补码全部取反</code>(<strong>~关键作用步骤</strong>) &#x3D;&#x3D;&gt; <code>转反码</code> &#x3D;&gt; <code>转原码</code>(最终值得原码)</p>
<ul>
<li><code>~5</code>:0000 0101(原、反、补) &#x3D;&gt; 1111 1010(补码取反) &#x3D;&gt; 1111 1001(减 1 变反码) &#x3D;&gt; 1000 0110(变原码) &#x3D;&gt; -6</li>
</ul>
</li>
<li><p>位数的运算</p>
<ul>
<li>8 位 最大值是 255 &#x3D;&gt; 1+2+4+8+16+32+64+128 &#x3D;&gt; 2^0 ~ 2^7 &#x3D;&gt; 2^8 - 1 的结果</li>
<li>32 位 最大值是 2^0 ~ 2^31 值之和 &#x3D;&gt; 2^32 -1</li>
<li>2^32 - 1 的 4294967295 是 32 位能表示的最大值</li>
<li>2^31 的 2147483648 的大小是 32 位中最小的（1 31 个 0）</li>
</ul>
</li>
<li><p>操作数被转换为 32 位二进制表示（0 和 1）。超过 32 位的数字将丢弃</p>
<ul>
<li>范围内 任何数字 x 的运算结果都是<code>-(x + 1)</code><ul>
<li>上述 2^31 的 2147483648 涉及到 32 位了（大于等于它的数值在~中都不存在符号了）,不能用公式</li>
<li>大于等于 2147483648 的数值 x,~x &#x3D;&gt; 4294967295 - x;</li>
<li>总结<ul>
<li>达到最高 32 位的正数 与 ~最终结果之和要等于 4294967295</li>
<li>未达到最高 32 的正数 与 ~最终结果之和要等于 -1</li>
<li>大于等于 -2147483648 的负数 与 ~最终结果之和要等于-1</li>
<li>小于 -2147483648 的负数 与 ~最终结果之和要等于 -4294967297</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="Set、Map、weakSet、weakMap"><a href="#Set、Map、weakSet、weakMap" class="headerlink" title="Set、Map、weakSet、weakMap"></a>Set、Map、weakSet、weakMap</h4><p>Set</p>
<ol>
<li>成员不能重复</li>
<li>只有健值，没有健名，有点类似数组。</li>
<li>可以遍历，方法有 add, delete,has<br>weakSet</li>
<li>成员都是对象</li>
<li>成员都是弱引用，随时可以消失。 可以用来保存 DOM 节点，不容易造成内存泄漏</li>
<li>不能遍历，方法有 add, delete,has<br>Map</li>
<li>本质上是健值对的集合，类似集合</li>
<li>可以遍历，方法很多，可以干跟各种数据格式转换<br>weakMap</li>
<li>直接受对象作为健名（null 除外），不接受其他类型的值作为健名<br>健名所指向的对象，不计入垃圾回收机制</li>
<li>不能遍历，方法同 get,set,has,delete</li>
</ol>
<h3 id="js-代码整洁之道"><a href="#js-代码整洁之道" class="headerlink" title="js 代码整洁之道"></a>js 代码整洁之道</h3><p><a target="_blank" rel="noopener" href="https://zhuanlan.zhihu.com/p/159458364">暂时参考</a><br><a target="_blank" rel="noopener" href="https://www.cnblogs.com/wenxinsj/p/14646550.html">暂时参考</a><br><a target="_blank" rel="noopener" href="https://www.jianshu.com/p/fb4409d8ace2">暂时参考</a></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">1.文件、文件夹名，横杠分词</span></span><br><span class="line"><span class="comment">	序号，下划线</span></span><br><span class="line"><span class="comment">2.组件，大驼峰</span></span><br><span class="line"><span class="comment">3.类名，横杠分词，多层级双横杠</span></span><br><span class="line"><span class="comment">4.函数名、普通变量名，小驼峰</span></span><br><span class="line"><span class="comment">5.关键字、变量、标点符号（除 括号 和 引号）后加空格</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h3 id="断点调试"><a href="#断点调试" class="headerlink" title="断点调试"></a>断点调试</h3><blockquote>
<p>在某一行打下断点,当浏览器执行到这一行时，程序暂停，可以观察限制，代码状态，变量值等，在通过下一步下一步查看代码走向以及值的变化</p>
</blockquote>
<h2 id="JS-功能性问题"><a href="#JS-功能性问题" class="headerlink" title="JS 功能性问题"></a>JS 功能性问题</h2><h3 id="js-判断服务器图片是否存在"><a href="#js-判断服务器图片是否存在" class="headerlink" title="js 判断服务器图片是否存在"></a>js 判断服务器图片是否存在</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="title class_">ImgObj</span> = <span class="keyword">new</span> <span class="title class_">Image</span>(); <span class="comment">//判断图片是否存在</span></span><br><span class="line"><span class="title class_">ImgObj</span>.<span class="property">src</span> = <span class="string">&quot;xxxx.png&quot;</span>;</span><br><span class="line"><span class="title class_">ImgObj</span>.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;图片存在&quot;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="title class_">ImgObj</span>.<span class="property">onerror</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;图片不存在&quot;</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="js-插入样式"><a href="#js-插入样式" class="headerlink" title="js 插入样式"></a>js 插入样式</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> style = <span class="string">&quot;&lt;style&gt;#print .linetow&#123;text-align:center&#125;&lt;/style&gt;&quot;</span>;</span><br><span class="line"><span class="keyword">var</span> ele = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;div&quot;</span>);</span><br><span class="line">ele.<span class="property">innerHTML</span> = style;</span><br><span class="line"><span class="variable language_">document</span>.<span class="title function_">getElementsByTagName</span>(<span class="string">&quot;head&quot;</span>)[<span class="number">0</span>].<span class="title function_">appendChild</span>(ele.<span class="property">firstElementChild</span>);</span><br></pre></td></tr></table></figure>

<h3 id="类数组转数组"><a href="#类数组转数组" class="headerlink" title="类数组转数组"></a>类数组转数组</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">getArray</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">arguments</span>);</span><br><span class="line">  <span class="comment">//1. 原理是数组的slice()方法可以从已有数组中返回一个新数组，它可以接受两个参数arr.slice(start,end),如果不传参将返回原数组的一个副本，但该方法不会修改原数组，而是返回截取的新数组</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">slice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>));</span><br><span class="line">  <span class="comment">//2. splice(start,count,item) 改变原数组</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">splice</span>.<span class="title function_">call</span>(<span class="variable language_">arguments</span>, <span class="number">0</span>));</span><br><span class="line">  <span class="comment">//3. Array.from(arguments)</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">from</span>(<span class="variable language_">arguments</span>));</span><br><span class="line">  <span class="comment">//4. Array.apply(null, arguments)</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title class_">Array</span>.<span class="title function_">apply</span>(<span class="literal">null</span>, <span class="variable language_">arguments</span>));</span><br><span class="line">  <span class="comment">//5. [].concat.apply([], arguments)</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>([].<span class="property">concat</span>.<span class="title function_">apply</span>([], <span class="variable language_">arguments</span>));</span><br><span class="line">  <span class="comment">//6. 循环遍历类数组对象，push到新创建的数组对象里</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">getArray</span>(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>);</span><br></pre></td></tr></table></figure>

<h3 id="根据对象某属性去重"><a href="#根据对象某属性去重" class="headerlink" title="根据对象某属性去重"></a>根据对象某属性去重</h3><blockquote>
<p>通过 reduce,判断 list 列表每一项的 a 属性,是否含有与 next 中 a 相等的，如果有不添加 next，否则添加 next</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> objList = [</span><br><span class="line">  &#123; <span class="attr">a</span>: <span class="number">3</span>, <span class="attr">b</span>: <span class="number">2</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">a</span>: <span class="number">1</span>, <span class="attr">b</span>: <span class="number">2</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">a</span>: <span class="number">2</span>, <span class="attr">b</span>: <span class="number">2</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">a</span>: <span class="number">3</span>, <span class="attr">b</span>: <span class="number">2</span> &#125;,</span><br><span class="line">];</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">  objList.<span class="title function_">reduce</span>(</span><br><span class="line">    <span class="function">(<span class="params">list, next</span>) =&gt;</span></span><br><span class="line">      list.<span class="title function_">some</span>(<span class="function">(<span class="params">item</span>) =&gt;</span> item[<span class="string">&quot;a&quot;</span>] == next[<span class="string">&quot;a&quot;</span>]) ? list : [...list, next],</span><br><span class="line">    []</span><br><span class="line">  )</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<h3 id="数组扁平化"><a href="#数组扁平化" class="headerlink" title="数组扁平化"></a>数组扁平化</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 数组扁平化</span></span><br><span class="line"><span class="keyword">let</span> arr = [<span class="number">1</span>, <span class="number">2</span>, [<span class="number">3</span>, <span class="number">4</span>], <span class="number">5</span>, [<span class="number">8</span>, [<span class="number">9</span>, <span class="number">10</span>]]];</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> <span class="title function_">m_concat</span> = (<span class="params">...arg</span>) =&gt; &#123;</span><br><span class="line">  <span class="comment">// 1、扁平化 flat</span></span><br><span class="line">  <span class="keyword">return</span> arg.<span class="title function_">flat</span>(<span class="title class_">Infinity</span>);</span><br><span class="line"></span><br><span class="line">  <span class="comment">// 2、reduct</span></span><br><span class="line">  <span class="comment">// if (arg.length == 1) &#123;</span></span><br><span class="line">  <span class="comment">//     arg = arg[0];</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">  <span class="comment">// return arg.reduce((a, next) =&gt; &#123;</span></span><br><span class="line">  <span class="comment">//     return a.concat(Array.isArray(next) ? m_concat(next) : next);</span></span><br><span class="line">  <span class="comment">// &#125;, []);</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 3、正则</span></span><br><span class="line">  <span class="comment">// return JSON.stringify(arg).replace(/\[|\]/g,&quot;&quot;).split(&quot;,&quot;);</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 4、数值变字符串，并将字符串数值变为number， arg+&quot;&quot; 一样</span></span><br><span class="line">  <span class="comment">// return arg.toString().split(&quot;,&quot;).map((item) =&gt; (/^\d+$/.test(item) ? Number(item) : item));</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">// 5、while some</span></span><br><span class="line">  <span class="comment">// while (arg.some((item) =&gt; Array.isArray(item))) &#123;</span></span><br><span class="line">  <span class="comment">//     arg = [].concat(...arg);</span></span><br><span class="line">  <span class="comment">// &#125;</span></span><br><span class="line">  <span class="comment">// return arg;</span></span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">flatten</span> = (<span class="params">array</span>) =&gt; &#123;</span><br><span class="line">  array.<span class="title function_">reduce</span>(<span class="function">(<span class="params">acc, cur</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">Array</span>.<span class="title function_">isArray</span>(cur) ? [...acc, ...<span class="title function_">flatten</span>(cur)] : [...acc, cur];</span><br><span class="line">  &#125;, []);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">flatten</span>(arr));</span><br></pre></td></tr></table></figure>

<h3 id="Blob"><a href="#Blob" class="headerlink" title="Blob"></a>Blob</h3><blockquote>
<p>Blob(二进制大对象)对象是一个用来包装二进制文件的容器，File 继承于 Blob</p>
<p><strong>IE9-浏览器不支持</strong></p>
</blockquote>
<h4 id="Blob-创建"><a href="#Blob-创建" class="headerlink" title="Blob 创建"></a>Blob 创建</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> myBlob = <span class="keyword">new</span> <span class="title class_">Blob</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>], &#123; <span class="attr">type</span>: <span class="string">&quot;text/plain&quot;</span> &#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myBlob);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myBlob.<span class="property">size</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(myBlob.<span class="property">type</span>);</span><br><span class="line"><span class="comment">// blob.slice 大文件切割返回小 blob</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 通过input FileList获取文件Blob</span></span><br></pre></td></tr></table></figure>

<h4 id="Blob-下载"><a href="#Blob-下载" class="headerlink" title="Blob 下载"></a>Blob 下载</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;script type=<span class="string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="line">    <span class="comment">//创建XMLHttpRequest对象</span></span><br><span class="line">    <span class="keyword">var</span> xhr = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line">    <span class="comment">//配置请求方式、请求地址以及是否同步</span></span><br><span class="line">    xhr.<span class="title function_">open</span>(<span class="string">&#x27;POST&#x27;</span>, <span class="string">&#x27;/sfwanshengjie/mp4/shipin1.mp4&#x27;</span>, <span class="literal">true</span>);</span><br><span class="line">    <span class="comment">//设置请求结果类型为blob</span></span><br><span class="line">    xhr.<span class="property">responseType</span> = <span class="string">&#x27;blob&#x27;</span>;</span><br><span class="line">    <span class="comment">//请求成功回调函数</span></span><br><span class="line">    xhr.<span class="property">onload</span> = <span class="keyword">function</span>(<span class="params">e</span>) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="variable language_">this</span>.<span class="property">status</span> == <span class="number">200</span>) &#123;</span><br><span class="line">            <span class="comment">//获取blob对象</span></span><br><span class="line">            <span class="keyword">var</span> blob = <span class="variable language_">this</span>.<span class="property">response</span>;</span><br><span class="line">            <span class="variable language_">console</span>.<span class="title function_">log</span>(blob);</span><br><span class="line">            <span class="comment">//获取blob对象地址，并把值赋给容器</span></span><br><span class="line">            <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;video&quot;</span>).<span class="property">src</span> = <span class="variable constant_">URL</span>.<span class="title function_">createObjectURL</span>(blob);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;;</span><br><span class="line">    xhr.<span class="title function_">send</span>();</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h4 id="Blob-转地址"><a href="#Blob-转地址" class="headerlink" title="Blob 转地址"></a>Blob 转地址</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 把blob转化成当前页面的一个data:image/jpeg;base64内存地址</span></span><br><span class="line"><span class="keyword">let</span> fr = <span class="keyword">new</span> <span class="title class_">FileReader</span>();</span><br><span class="line">fr.<span class="title function_">readAsDataURL</span>(file | blob);</span><br><span class="line">fr.<span class="property">onloadend</span> = <span class="keyword">function</span> (<span class="params">e</span>) &#123;</span><br><span class="line">  <span class="keyword">let</span> base64 = e.<span class="property">target</span>.<span class="property">result</span>;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(base64);</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 把blob转化成当前页面的一个blob:xxxx内存地址</span></span><br><span class="line"><span class="keyword">let</span> src = <span class="variable language_">window</span>.<span class="property">URL</span>.<span class="title function_">createObjectURL</span>(file | blob); <span class="comment">// 这个方法也可以传一个file</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(src);</span><br><span class="line">img.<span class="property">src</span> = src;</span><br></pre></td></tr></table></figure>

<ul>
<li>URL.createObjectURL(file|blob) 可以获取当前文件的一个内存 URL<ul>
<li>得到 blob:<a target="_blank" rel="noopener" href="http://127.0.0.1:5500/xxxxxxxx">http://127.0.0.1:5500/xxxxxxxx</a> 格式地址，不是 base64 的</li>
<li>比 base64 地址小节约空间</li>
<li>立即执行的同步生成，FileReader 需要在 onload 下异步获取 base64</li>
<li>URL.revokeObjectURL 释放该地址</li>
<li>data:&#x2F;&#x2F;URL 会对内容进行编码。blob:&#x2F;&#x2F;URL 只是对浏览器存储在内存中或者磁盘上的 Blob 的一个简单引用</li>
</ul>
</li>
</ul>
<h3 id="JS-获取-base64-的方式"><a href="#JS-获取-base64-的方式" class="headerlink" title="JS 获取 base64 的方式"></a>JS 获取 base64 的方式</h3><blockquote>
<p>base64 是二进制数据的一个编码格式</p>
</blockquote>
<ul>
<li>JS 通过 FileReader 获取 base64</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> fileReader = <span class="keyword">new</span> <span class="title class_">FileReader</span>();</span><br><span class="line">fileReader.<span class="title function_">readAsDataURL</span>(file | <span class="title class_">Blob</span>); <span class="comment">// base64形式 读取图片</span></span><br><span class="line">fileReader.<span class="property">onload</span> = <span class="function">(<span class="params">e</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">//图片读取完成</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(e.<span class="property">target</span>.<span class="property">result</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<ul>
<li>JS 通过 canvas 获取 base64</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 这个image就是输入</span></span><br><span class="line"><span class="comment">// 除了new，也可以直接取页面上的标签</span></span><br><span class="line"><span class="keyword">var</span> image = <span class="keyword">new</span> <span class="title class_">Image</span>();</span><br><span class="line"></span><br><span class="line">image.<span class="property">onload</span> = <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">   <span class="keyword">var</span> w = image.<span class="property">width</span>;</span><br><span class="line">   <span class="keyword">var</span> h = image.<span class="property">height</span>;</span><br><span class="line">   <span class="keyword">var</span> canvas = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&#x27;canvas&#x27;</span>);</span><br><span class="line">   <span class="keyword">var</span> ctx = canvas.<span class="title function_">getContext</span>(<span class="string">&quot;2d&quot;</span>);</span><br><span class="line">   canvas.<span class="property">width</span> = w;</span><br><span class="line">   canvas.<span class="property">height</span> = h;</span><br><span class="line">   ctx.<span class="title function_">drawImage</span>(image, <span class="number">0</span>, <span class="number">0</span>, w, h);</span><br><span class="line">   <span class="comment">// 可以在这里添加水印或者合并图片什么的</span></span><br><span class="line">   ...</span><br><span class="line">   <span class="comment">// 把画布的内容转成base64，这个就是输出</span></span><br><span class="line">   <span class="keyword">var</span> base64 = canvas.<span class="title function_">toDataURL</span>(<span class="string">&#x27;image/jpeg&#x27;</span>，<span class="number">0.1</span>);<span class="comment">//参数2压缩比例</span></span><br><span class="line">   <span class="variable language_">console</span>.<span class="title function_">log</span>(base64)</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 这个src可以是本地路径，服务器图片地址，也可以是上面fileReader的base64</span></span><br><span class="line">image.<span class="property">src</span> = <span class="string">&quot;xxx.jpg&quot;</span>;</span><br></pre></td></tr></table></figure>

<h3 id="输入框光标"><a href="#输入框光标" class="headerlink" title="输入框光标"></a>输入框光标</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title class_">Input</span> = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;input&quot;</span>);</span><br><span class="line"><span class="comment">//vue ref =&gt; Input = this.$refs.exprInput.getInput()</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取</span></span><br><span class="line"><span class="keyword">let</span> start = <span class="title class_">Input</span>.<span class="property">selectionStart</span>; <span class="comment">//获取开始位置</span></span><br><span class="line"><span class="keyword">let</span> end = <span class="title class_">Input</span>.<span class="property">selectionEnd</span>; <span class="comment">//获取结束位置</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//设置 vue需要 this.$nextTick(() =&gt; &#123;&#125;) 中,当dom都加载完毕再执行</span></span><br><span class="line"><span class="variable language_">this</span>.$nextTick(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="title class_">Input</span>.<span class="title function_">setSelectionRange</span>(<span class="number">1</span>, <span class="number">3</span>);</span><br><span class="line">  <span class="comment">//或</span></span><br><span class="line">  start.<span class="property">selectionStart</span> = <span class="number">1</span>; <span class="comment">// 设置光标开始的位置</span></span><br><span class="line">  end.<span class="property">selectionEnd</span> = <span class="number">3</span>; <span class="comment">// 设置光标结束的位置</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 案例 光标位置插入数据</span></span><br><span class="line"><span class="keyword">let</span> inputval = <span class="string">&quot;123456&quot;</span>;</span><br><span class="line"><span class="keyword">let</span> before = inputval.<span class="title function_">substring</span>(<span class="number">0</span>, start);</span><br><span class="line"><span class="keyword">let</span> after = inputval.<span class="title function_">substring</span>(end);</span><br><span class="line"><span class="keyword">let</span> data = before + <span class="string">&quot;newvalue&quot;</span> + after;</span><br></pre></td></tr></table></figure>

<h3 id="图片上传"><a href="#图片上传" class="headerlink" title="图片上传"></a>图片上传</h3><p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/pengdt/p/12037986.html">xxxx</a></p>
<ul>
<li>多选:multiple</li>
<li>指定类型:accept&#x3D;”image&#x2F;*“</li>
<li>类数组 input.flies 返回一个 FileList 选择的图片数据</li>
<li>capture 调用摄像头</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">&quot;uploadFile&quot;</span> <span class="attr">type</span>=<span class="string">&quot;file&quot;</span> <span class="attr">accept</span>=<span class="string">&quot;image/*&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;uploadFile()&quot;</span>&gt;</span>上传文件<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h4 id="FileReader"><a href="#FileReader" class="headerlink" title="FileReader"></a>FileReader</h4><blockquote>
<p>FileReader 是用来读取内存中的文件的 API，支持 File 和 Blob 两种格式。</p>
</blockquote>
<ul>
<li>FileReader.readyState<ul>
<li>0：EMPTY&#x2F;还没有加载任何数据</li>
<li>1：LOADING&#x2F;数据正在被加载</li>
<li>2：DONE&#x2F;已完成全部的读取请求</li>
</ul>
</li>
<li>FileReader.result</li>
<li>FileReader.error</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// readAsArrayBuffer(file) :按字节读取文件内容，结果用ArrayBuffer对象表示</span></span><br><span class="line"><span class="comment">// readAsBinaryString(file) :按字节读取文件内容，结果为文件的二进制串</span></span><br><span class="line"><span class="comment">// readAsDataURL(file) :读取文件内容，结果用data:url的字符串形式表示</span></span><br><span class="line"><span class="comment">// readAsText(file,encoding) :按字符读取文件内容，结果用字符串形式表示</span></span><br><span class="line"><span class="comment">// abort() :终止文件读取操作</span></span><br><span class="line"><span class="comment">// 事件</span></span><br><span class="line"><span class="comment">// onloadstart 当读取操作开始时调用</span></span><br><span class="line"><span class="comment">// onprogress 在读取数据过程中周期性调用</span></span><br><span class="line"><span class="comment">// onabort 当读取操作被中止时调用</span></span><br><span class="line"><span class="comment">// onerror 当读取操作发生错误时调用</span></span><br><span class="line"><span class="comment">// onload 当读取操作成功完成时调用</span></span><br><span class="line"><span class="comment">// onloadend 当读取操作完成时调用，无论成功，失败或取消</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> fileReader = <span class="keyword">new</span> <span class="title class_">FileReader</span>();</span><br><span class="line">fileReader.<span class="title function_">readAsDataURL</span>(file); <span class="comment">// base64形式 读取图片</span></span><br><span class="line">fileReader.<span class="property">onload</span> = <span class="function">(<span class="params">e</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">//图片读取完成</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(e.<span class="property">target</span>.<span class="property">result</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//或</span></span><br><span class="line"><span class="keyword">let</span> fileReader = <span class="keyword">new</span> <span class="title class_">FileReader</span>();</span><br><span class="line">fileReader.<span class="title function_">readAsDataURL</span>(file);</span><br><span class="line">fileReader.<span class="title function_">addEventListener</span>(<span class="string">&quot;load&quot;</span>, <span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">  <span class="comment">// 读取完成</span></span><br><span class="line">  <span class="keyword">let</span> res = fileReader.<span class="property">result</span>;</span><br><span class="line">  <span class="comment">// res是base64格式的图片</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h4 id="FormData"><a href="#FormData" class="headerlink" title="FormData"></a>FormData</h4><blockquote>
<p>用一些键值对来模拟一系列表单控件：即把 form 中所有表单元素的 name 与 value 组装成 一个 queryString</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> formData = <span class="keyword">new</span> <span class="title class_">FormData</span>();</span><br><span class="line"><span class="comment">//各种方式给formData添加文件数据</span></span><br><span class="line">formData.<span class="title function_">set</span>(fieldName, file);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    name:属性名</span></span><br><span class="line"><span class="comment">    value:属性值，在我们这里则指 file 数据</span></span><br><span class="line"><span class="comment">    filename:当第二个参数为 file 或 blob 时，告诉服务器的文件名。Blob 对象的默认文件名是“blob”。File 对象的默认文件名 是文件的文件名。</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line">formData.<span class="title function_">append</span>(name, value, filename);</span><br></pre></td></tr></table></figure>

<h4 id="上传"><a href="#上传" class="headerlink" title="上传"></a>上传</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> config = &#123;</span><br><span class="line">  <span class="attr">headers</span>: &#123;</span><br><span class="line">    <span class="string">&quot;Content-Type&quot;</span>: <span class="string">&quot;multipart/form-data&quot;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">axios</span><br><span class="line">  .<span class="title function_">post</span>(<span class="string">&quot;url/load&quot;</span>, formDate, config)</span><br><span class="line">  .<span class="title function_">then</span>(<span class="function">(<span class="params">res</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(res);</span><br><span class="line">  &#125;)</span><br><span class="line">  .<span class="title function_">catch</span>(<span class="function">(<span class="params">err</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(err);</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>

<h4 id="大文件上传"><a href="#大文件上传" class="headerlink" title="大文件上传"></a>大文件上传</h4><pre><code>-	file继承Blob利用Blob的slice方法将文件切片
-	确定每片大小
-	获取总大小 (file.size)
-	片段数量 (Math.ceil(总大小/每片大小))
-	定义一个偏移量决定每次调接口传哪一段，每次调用便宜量++
</code></pre>
<h4 id="Canvas-图片上传"><a href="#Canvas-图片上传" class="headerlink" title="Canvas 图片上传"></a>Canvas 图片上传</h4><pre><code>-	通过 canvas.toDataURL(&#39;image/jpeg&#39;) 上传base64上传
</code></pre>
<h3 id="字符集"><a href="#字符集" class="headerlink" title="字符集"></a>字符集</h3><p>ASCII 码字符集、Unicode 字符集</p>
<h3 id="字符串编码"><a href="#字符串编码" class="headerlink" title="字符串编码"></a>字符串编码</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">计算机的底层硬件实现就是用电量的 开 和 闭 两种状态来表示0 和 1 的</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">ASCII </span></span><br><span class="line"><span class="comment">ASCII  使用一个字节表示一个字符(8bit)，不使用最高位</span></span><br><span class="line"><span class="comment">二进制  0000 0000    十进制   0         </span></span><br><span class="line"><span class="comment">        0111 1111            127</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">最多只能表示128个字符</span></span><br><span class="line"><span class="comment">数字与编码存在着对应关系chr 和 ord 可查看对应关系</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">-----------------------------------------------</span></span><br><span class="line"><span class="comment">latin1(ISO-8859-1)  HTML 4 的默认字符集</span></span><br><span class="line"><span class="comment">向下兼容ASCII ,启用最高位</span></span><br><span class="line"><span class="comment">二进制曾 1000 0000    十进制  128</span></span><br><span class="line"><span class="comment">        1111 1111            255</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">最多能表示255个字符</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">-------------------------------------------------</span></span><br><span class="line"><span class="comment">Unicode(国际码) 表示更多字符,大多数国家的文字都有一个对应编码</span></span><br><span class="line"><span class="comment">(1) Unicode 与 latin1无关,前128兼容ASCLL</span></span><br><span class="line"><span class="comment">(2) 通过连个字节来表示更多的自己付 最多可达16位</span></span><br><span class="line"><span class="comment">(3) 为了让计算机知道后面的两个字节代表的是一个字符,还是两个字符,所以所有字符都有两个字节代替,不够就补0(比较浪费空间)</span></span><br><span class="line"><span class="comment">(4)如果将一个字符的16位当做两个8位处理就会造成乱码(如:x.encode(&#x27;utf8&#x27;)  得到的结果 decode(&#x27;gbk‘)情况)</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">(5) 基于浪费空间问题于是产生很多Unicode 的编码方式如:  UTF-8 、 UTF-16、GBK、BIG5 或 UTF-32等了</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">Unicode 的编码方式不同编码方式以不同规则表示</span></span><br><span class="line"><span class="comment">GBK: 国标扩，规定汉子占两个字节,用于简体中文</span></span><br><span class="line"><span class="comment">BIG5:繁体中午</span></span><br><span class="line"><span class="comment">UTF-8:统一编码 汉字占三个字节</span></span><br><span class="line"><span class="comment">-------------------------------------------------</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h3 id="滚动条动态底部"><a href="#滚动条动态底部" class="headerlink" title="滚动条动态底部"></a>滚动条动态底部</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//变化的时候</span></span><br><span class="line"><span class="variable language_">this</span>.$nextTick(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">overflow</span>容器.<span class="property">scrollTop</span> = <span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">overflow</span>容器.<span class="property">scrollHeight</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="指定时间触发定时器"><a href="#指定时间触发定时器" class="headerlink" title="指定时间触发定时器"></a>指定时间触发定时器</h3><blockquote>
<p>通过一个定时器找到指定时与分，关闭定时器，执行内容，定义第二个 24 小时执行一次的定时器</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 固定时间执行定时器</span></span><br><span class="line"><span class="comment">// 利用定时器监听到某个时间点时触发另外一个定时器</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">ListenerTime</span> = <span class="number">1000</span> * <span class="number">60</span> * <span class="number">2</span>; <span class="comment">//监控的执行间隔时间   每小时</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">StartTime</span> = <span class="number">1000</span> * <span class="number">60</span> * <span class="number">60</span> * <span class="number">24</span>; <span class="comment">//正式启动后的执行间隔时间   每天 24小时</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">RunInterval</span>,</span><br><span class="line">  runTime,</span><br><span class="line">  hh = <span class="number">11</span>,</span><br><span class="line">  mm = <span class="number">34</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> *	启动的入口</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">run</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;正在启动监听....&quot;</span>);</span><br><span class="line">  <span class="comment">//直接符合条件不开定时器</span></span><br><span class="line">  <span class="keyword">if</span> (<span class="title function_">runCode</span>()) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  runTime = <span class="built_in">setInterval</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="title function_">runCode</span>();</span><br><span class="line">  &#125;, <span class="title class_">ListenerTime</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * run定时器中要做的事情</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">runCode</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">    <span class="string">&quot;监听中....第&quot;</span> +</span><br><span class="line">      <span class="title function_">getTime</span>(<span class="string">&quot;hh&quot;</span>) +</span><br><span class="line">      <span class="string">&quot;小时&quot;</span> +</span><br><span class="line">      <span class="string">&quot;,当前是第 &quot;</span> +</span><br><span class="line">      <span class="title function_">getTime</span>(<span class="string">&quot;mm&quot;</span>) +</span><br><span class="line">      <span class="string">&quot; 分,&quot;</span> +</span><br><span class="line">      <span class="title function_">getTime</span>(<span class="string">&quot;ss&quot;</span>) +</span><br><span class="line">      <span class="string">&quot; 秒&quot;</span></span><br><span class="line">  );</span><br><span class="line">  <span class="keyword">if</span> (<span class="title function_">getTime</span>(<span class="string">&quot;hh&quot;</span>) == hh) &#123;</span><br><span class="line">    <span class="comment">//当系统时间是中午12点启动，如果是特定的其他时间可按需改动</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="title function_">getTime</span>(<span class="string">&quot;mm&quot;</span>) == mm || <span class="title function_">getTime</span>(<span class="string">&quot;mm&quot;</span>) == mm + <span class="number">1</span>) &#123;</span><br><span class="line">      runTime &amp;&amp; <span class="built_in">clearInterval</span>(runTime); <span class="comment">//清除监控的定时器</span></span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(</span><br><span class="line">        <span class="string">&quot;找到执行时间,当前过 1000 * 60 * 60 * 24 毫秒再次执行,已关闭监听&quot;</span></span><br><span class="line">      );</span><br><span class="line">      <span class="title class_">StartInterval</span>(); <span class="comment">//启动要执行的方法</span></span><br><span class="line">      <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> *  到监控时间后所要启动的定时器</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">StartInterval</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="title function_">main</span>();</span><br><span class="line">  <span class="title class_">RunInterval</span> = <span class="built_in">setInterval</span>(<span class="keyword">function</span> (<span class="params"></span>) &#123;</span><br><span class="line">    <span class="title function_">main</span>();</span><br><span class="line">  &#125;, <span class="title class_">StartTime</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> *  主要执行的函数内容</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">main</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="keyword">new</span> <span class="title class_">Date</span>() + <span class="string">&quot;正式执行&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> *	关闭主要执行的定时器</span></span><br><span class="line"><span class="comment"> * 	需要额外调用来关闭主程序</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">closeInterval</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="built_in">clearInterval</span>(<span class="title class_">RunInterval</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;已关闭执行程序&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/** 获取系统时间的方法  **/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> &#123;<span class="type">Object</span>&#125; time  想要获取时分秒的判断参数</span></span><br><span class="line"><span class="comment"> * YY 年;MM 月;DD 日;hh 时;mm 分;ss 秒;</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * return   返回类型为Number型,若参数正确，返回-1</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">getTime</span>(<span class="params">time</span>) &#123;</span><br><span class="line">  <span class="keyword">var</span> datetime = <span class="keyword">new</span> <span class="title class_">Date</span>();</span><br><span class="line">  <span class="keyword">var</span> year = datetime.<span class="title function_">getFullYear</span>();</span><br><span class="line">  <span class="keyword">var</span> month = datetime.<span class="title function_">getMonth</span>() + <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">var</span> day = datetime.<span class="title function_">getDate</span>();</span><br><span class="line">  <span class="keyword">var</span> <span class="title class_">Hours</span> = datetime.<span class="title function_">getHours</span>();</span><br><span class="line">  <span class="keyword">var</span> <span class="title class_">Minutes</span> = datetime.<span class="title function_">getMinutes</span>();</span><br><span class="line">  <span class="keyword">var</span> <span class="title class_">Seconds</span> = datetime.<span class="title function_">getSeconds</span>();</span><br><span class="line"></span><br><span class="line">  <span class="keyword">switch</span> (time) &#123;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;YY&quot;</span>:</span><br><span class="line">      <span class="keyword">return</span> year;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;MM&quot;</span>:</span><br><span class="line">      <span class="keyword">return</span> month;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;DD&quot;</span>:</span><br><span class="line">      <span class="keyword">return</span> day;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;hh&quot;</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="title class_">Hours</span>;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;mm&quot;</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="title class_">Minutes</span>;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">&quot;ss&quot;</span>:</span><br><span class="line">      <span class="keyword">return</span> <span class="title class_">Seconds</span>;</span><br><span class="line">      <span class="keyword">break</span>;</span><br><span class="line">    <span class="attr">default</span>:</span><br><span class="line">      <span class="keyword">return</span> -<span class="number">1</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//模拟启动</span></span><br><span class="line"><span class="title function_">run</span>();</span><br></pre></td></tr></table></figure>

<h3 id="requestAnimationFrame"><a href="#requestAnimationFrame" class="headerlink" title="requestAnimationFrame"></a>requestAnimationFrame</h3><blockquote>
<p>请求动画的 API <code>requestAnimationFrame</code> 由系统来决定回调函数的执行时机。<br>根据屏幕刷新率执行下一次<br>它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> progress = <span class="number">0</span>;</span><br><span class="line"><span class="comment">//回调函数</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">render</span>(<span class="params"></span>) &#123;</span><br><span class="line">  progress += <span class="number">1</span>; <span class="comment">//修改图像的位置</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(progress);</span><br><span class="line">  <span class="keyword">if</span> (progress &lt; <span class="number">100</span>) &#123;</span><br><span class="line">    <span class="comment">//在动画没有结束前，递归渲染</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="title function_">requestAnimationFrame</span>(render);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//第一帧渲染</span></span><br><span class="line"><span class="variable language_">window</span>.<span class="title function_">requestAnimationFrame</span>(render);</span><br></pre></td></tr></table></figure>

<ul>
<li>大数据操作<blockquote>
<p>如何操作优化注意的用掉的数据删除，避免下次又要查，和找到目标后直接跳出</p>
</blockquote>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="comment">// 插入十万条数据</span></span><br><span class="line">  <span class="keyword">const</span> total = <span class="number">1000000</span>;</span><br><span class="line">  <span class="comment">// 一次插入的数据</span></span><br><span class="line">  <span class="keyword">const</span> once = <span class="number">20</span>;</span><br><span class="line">  <span class="comment">// 插入数据需要的次数</span></span><br><span class="line">  <span class="keyword">const</span> loopCount = <span class="title class_">Math</span>.<span class="title function_">ceil</span>(total / once);</span><br><span class="line">  <span class="keyword">let</span> countOfRender = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">const</span> ul = <span class="variable language_">document</span>.<span class="title function_">querySelector</span>(<span class="string">&quot;ul&quot;</span>);</span><br><span class="line">  <span class="comment">// 添加数据的方法</span></span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> fragment = <span class="variable language_">document</span>.<span class="title function_">createDocumentFragment</span>();</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; once; i++) &#123;</span><br><span class="line">      <span class="keyword">const</span> li = <span class="variable language_">document</span>.<span class="title function_">createElement</span>(<span class="string">&quot;li&quot;</span>);</span><br><span class="line">      li.<span class="property">innerText</span> = <span class="title class_">Math</span>.<span class="title function_">floor</span>(<span class="title class_">Math</span>.<span class="title function_">random</span>() * total);</span><br><span class="line">      fragment.<span class="title function_">appendChild</span>(li);</span><br><span class="line">    &#125;</span><br><span class="line">    ul.<span class="title function_">appendChild</span>(fragment);</span><br><span class="line">    countOfRender += <span class="number">1</span>;</span><br><span class="line">    <span class="title function_">loop</span>();</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">function</span> <span class="title function_">loop</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">if</span> (countOfRender &lt; loopCount) &#123;</span><br><span class="line">      <span class="variable language_">window</span>.<span class="title function_">requestAnimationFrame</span>(add);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="title function_">loop</span>();</span><br><span class="line">&#125;, <span class="number">0</span>);</span><br></pre></td></tr></table></figure>

<h4 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h4><ul>
<li>CPU 节能：页面隐藏(不可见)时停止</li>
</ul>
<h3 id="iframe-详细"><a href="#iframe-详细" class="headerlink" title="iframe 详细"></a>iframe 详细</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">iframe</span> <span class="attr">id</span>=<span class="string">&quot;iframe&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> iframe = <span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;iframe&quot;</span>);</span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">1.iframe引入一些网站需要关闭 高级 &gt; 隐私设置和安全性 &gt; 内容设置 &gt; Cookie &gt; 阻止第三方Cookie</span></span><br><span class="line"><span class="comment">2.引入不同源页面，无法正常操作子页面</span></span><br><span class="line"><span class="comment">    跨域概念:协议与域名相同，就不算跨域</span></span><br><span class="line"><span class="comment">    跨域顶多只能实现页面跳转window.location.href.</span></span><br><span class="line"><span class="comment">    通过postMessage父子页面消息传递</span></span><br><span class="line"><span class="comment">        父页面（子）</span></span><br><span class="line"><span class="comment">            iframe.contentWindow.postMessage(&#x27;要发送的数据&#x27;或&#123;msg: &#x27;data to parent&#x27;&#125;,&#x27;*&#x27;);</span></span><br><span class="line"><span class="comment">            参数</span></span><br><span class="line"><span class="comment">                data：postMessage传递进来的值</span></span><br><span class="line"><span class="comment">                origin：发送消息的文档所在的域</span></span><br><span class="line"><span class="comment">                source：发送消息文档的window对象的代理</span></span><br><span class="line"><span class="comment">        子页面接收（父）</span></span><br><span class="line"><span class="comment">            window.addEventListener(&quot;message&quot;,(data)=&gt;&#123;console.log(data)&#125;, false);</span></span><br><span class="line"><span class="comment">3.同源情况下父页面操作子页面，或获取子页面消息数据</span></span><br><span class="line"><span class="comment">    子页面Win:iframe.contentWindow || window.frames[&#x27;framesName&#x27;]</span></span><br><span class="line"><span class="comment">    子页面Docs:iframe.contentDocument.getElementById(&quot;xxxxx&quot;)</span></span><br><span class="line"><span class="comment">4.同源情况下子页面操作父页面，或获取父页面消息数据</span></span><br><span class="line"><span class="comment">    子页面</span></span><br><span class="line"><span class="comment">        操作父页面:window.parent.ifrmLoaded(&#x27;window.parent.ifrmLoaded&#x27;);</span></span><br><span class="line"><span class="comment">        多层iframe最顶层:window.top</span></span><br><span class="line"><span class="comment">    父页面接收</span></span><br><span class="line"><span class="comment">        function ifrmLoaded(data)&#123;</span></span><br><span class="line"><span class="comment">            console.log(&#x27;接收子页面操作&#x27;+ data)</span></span><br><span class="line"><span class="comment">        &#125;</span></span><br><span class="line"><span class="comment">5.iframe的事件操作</span></span><br><span class="line"><span class="comment">    iframe.onload=()=&gt;&#123;&#125;; //子页面加载完成后执行</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">6.iframe标签常用属性</span></span><br><span class="line"><span class="comment">    iframe常用属性:</span></span><br><span class="line"><span class="comment">        1.frameborder:是否显示边框，1(yes),0(no)</span></span><br><span class="line"><span class="comment">        2.height:框架作为一个普通元素的高度，建议在使用css设置。</span></span><br><span class="line"><span class="comment">        3.width:框架作为一个普通元素的宽度，建议使用css设置。</span></span><br><span class="line"><span class="comment">        4.name:框架的名称，window.frames[name]时专用的属性。</span></span><br><span class="line"><span class="comment">        5.scrolling:框架的是否滚动。yes,no,auto。</span></span><br><span class="line"><span class="comment">        6.src：内框架的地址，可以使页面地址，也可以是图片的地址。</span></span><br><span class="line"><span class="comment">        7.sandbox: 对iframe进行一些列限制，IE10+支持</span></span><br><span class="line"><span class="comment">        8.allowfullscreen：是否允许全屏</span></span><br><span class="line"><span class="comment">        9.allowtransparency：是否允许设置透明</span></span><br><span class="line"><span class="comment">7.安全措施</span></span><br><span class="line"><span class="comment">    防止自己网页被iframe</span></span><br><span class="line"><span class="comment">        1. 手动跳转</span></span><br><span class="line"><span class="comment">            if(window != window.top)&#123;</span></span><br><span class="line"><span class="comment">                window.top.location.href = correctURL;</span></span><br><span class="line"><span class="comment">            &#125;</span></span><br><span class="line"><span class="comment">        或</span></span><br><span class="line"><span class="comment">            if (top.location.host != window.location.host) &#123;</span></span><br><span class="line"><span class="comment">            　　top.location.href = window.location.href;</span></span><br><span class="line"><span class="comment">            &#125;</span></span><br><span class="line"><span class="comment">        2.  响应头 X-Frame-Options</span></span><br><span class="line"><span class="comment">            X-Frame-Options是一个相应头，主要是描述服务器的网页资源的iframe权限。</span></span><br><span class="line"><span class="comment">                DENY：当前页面不能被嵌套iframe里，即便是在相同域名的页面中嵌套也不允许,也不允许网页中有嵌套iframe</span></span><br><span class="line"><span class="comment">                SAMEORIGIN：iframe页面的地址只能为同源域名下的页面</span></span><br><span class="line"><span class="comment">                ALLOW-FROM：可以在指定的origin url的iframe中加载</span></span><br><span class="line"><span class="comment">        3. 响应头 Content Security</span></span><br><span class="line"><span class="comment">            比较强大。。。。。</span></span><br><span class="line"><span class="comment">            Content-Security-Policy: default-src &#x27;self&#x27;</span></span><br><span class="line"><span class="comment">            。。。各种配置</span></span><br><span class="line"><span class="comment">    iframe别人网站</span></span><br><span class="line"><span class="comment">        1.sandbox</span></span><br><span class="line"><span class="comment">            是h5的一个新属性，就是用来给指定iframe设置一个沙盒模型，限制iframe的更多权限.</span></span><br><span class="line"><span class="comment">            allow-forms	允许进行提交表单</span></span><br><span class="line"><span class="comment">            allow-scripts	运行执行脚本</span></span><br><span class="line"><span class="comment">            allow-same-origin	允许同域请求,比如ajax,storage</span></span><br><span class="line"><span class="comment">            allow-top-navigation	允许iframe能够主导window.top进行页面跳转</span></span><br><span class="line"><span class="comment">            allow-popups	允许iframe中弹出新窗口,比如,window.open,target=&quot;_blank&quot;</span></span><br><span class="line"><span class="comment">            allow-pointer-lock	在iframe中可以锁定鼠标，主要和鼠标锁定有关</span></span><br><span class="line"><span class="comment">            &lt;iframe sandbox=&quot;allow-forms allow-same-origin&quot; src=&quot;...&quot;&gt;&lt;/iframe&gt;</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h3 id="页面滚动到顶部"><a href="#页面滚动到顶部" class="headerlink" title="页面滚动到顶部"></a>页面滚动到顶部</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> * 功能:快速向上滚动至顶部</span></span><br><span class="line"><span class="comment"> * 描述: scrollTo(x,y) 通过横纵坐标位置</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">scrollToTop</span> = (<span class="params"></span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">const</span> t = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">scrollTop</span> || <span class="variable language_">document</span>.<span class="property">body</span>.<span class="property">scrollTop</span>; <span class="comment">//获取滚动高度</span></span><br><span class="line">  <span class="keyword">if</span> (t &gt; <span class="number">0</span>) &#123;</span><br><span class="line">    <span class="variable language_">window</span>.<span class="title function_">requestAnimationFrame</span>(scrollToTop); <span class="comment">//浏览器自动判断动画完成之后执行回调</span></span><br><span class="line">    <span class="variable language_">window</span>.<span class="title function_">scrollTo</span>(<span class="number">0</span>, t - t / <span class="number">8</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="title function_">scrollToTop</span>();</span><br></pre></td></tr></table></figure>

<h3 id="点击复制"><a href="#点击复制" class="headerlink" title="点击复制"></a>点击复制</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 1、 input 复制</span></span><br><span class="line"><span class="variable language_">this</span>.<span class="property">inputvmodel</span> = <span class="string">&quot;xxxxxx&quot;</span>;</span><br><span class="line"><span class="variable language_">this</span>.$nextTick(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">this</span>.<span class="property">$refs</span>.<span class="property">inputref</span>.<span class="title function_">select</span>();</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">execCommand</span>(<span class="string">&quot;copy&quot;</span>); <span class="comment">//只能复制显示的input</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 2、 直接复制元素内容</span></span><br><span class="line"><span class="comment"> *  getSelection 表示用户选择的文本范围或光标的当前位置</span></span><br><span class="line"><span class="comment"> *  selectAllChildren 选中 操作元素所有子节点的innerHTML</span></span><br><span class="line"><span class="comment"> *  document.execCommand 即将废弃 用 clipboard 代替</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">if</span> (navigator.<span class="property">clipboard</span>.<span class="property">writeText</span>) &#123;</span><br><span class="line">  navigator.<span class="property">clipboard</span>.<span class="title function_">writeText</span>(e.<span class="property">target</span>.<span class="property">innerText</span>); <span class="comment">// 复制，写入剪切板</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;clipboard&quot;</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="variable language_">window</span>.<span class="title function_">getSelection</span>().<span class="title function_">selectAllChildren</span>(e.<span class="property">target</span>);</span><br><span class="line">  <span class="variable language_">document</span>.<span class="title function_">execCommand</span>(<span class="string">&quot;copy&quot;</span>);</span><br><span class="line">  <span class="comment">//console.log(window.getSelection().toString()); // 获取选择内容</span></span><br><span class="line">  <span class="variable language_">window</span>.<span class="title function_">getSelection</span>().<span class="title function_">removeAllRanges</span>(); <span class="comment">//清除选择的内容</span></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;execCommand&quot;</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable language_">this</span>.<span class="property">$message</span>.<span class="title function_">success</span>(&#123; <span class="attr">showClose</span>: <span class="literal">true</span>, <span class="attr">message</span>: <span class="string">&quot;复制成功&quot;</span>, <span class="attr">duration</span>: <span class="number">1500</span> &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 粘贴</span></span><br><span class="line">navigator.<span class="property">clipboard</span></span><br><span class="line">  .<span class="title function_">readText</span>()</span><br><span class="line">  .<span class="title function_">then</span>(<span class="function">(<span class="params">clipText</span>) =&gt;</span> (e.<span class="property">target</span>.<span class="property">innerText</span> = clipText));</span><br></pre></td></tr></table></figure>

<h3 id="数字转大写"><a href="#数字转大写" class="headerlink" title="数字转大写"></a>数字转大写</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> <span class="title function_">digitUppercase</span> = (<span class="params">n</span>) =&gt; &#123;</span><br><span class="line">  <span class="keyword">var</span> fraction = [<span class="string">&quot;角&quot;</span>, <span class="string">&quot;分&quot;</span>];</span><br><span class="line">  <span class="keyword">var</span> digit = [<span class="string">&quot;零&quot;</span>, <span class="string">&quot;壹&quot;</span>, <span class="string">&quot;贰&quot;</span>, <span class="string">&quot;叁&quot;</span>, <span class="string">&quot;肆&quot;</span>, <span class="string">&quot;伍&quot;</span>, <span class="string">&quot;陆&quot;</span>, <span class="string">&quot;柒&quot;</span>, <span class="string">&quot;捌&quot;</span>, <span class="string">&quot;玖&quot;</span>];</span><br><span class="line">  <span class="keyword">var</span> unit = [</span><br><span class="line">    <span class="comment">//unit[2]均分unit[1], 如:佰元、佰万、佰亿</span></span><br><span class="line">    [<span class="string">&quot;元&quot;</span>, <span class="string">&quot;万&quot;</span>, <span class="string">&quot;亿&quot;</span>],</span><br><span class="line">    [<span class="string">&quot;&quot;</span>, <span class="string">&quot;拾&quot;</span>, <span class="string">&quot;佰&quot;</span>, <span class="string">&quot;仟&quot;</span>],</span><br><span class="line">  ];</span><br><span class="line"></span><br><span class="line">  <span class="comment">//算前:判断是否为负数</span></span><br><span class="line">  <span class="keyword">var</span> head = n &lt; <span class="number">0</span> ? <span class="string">&quot;欠&quot;</span> : <span class="string">&quot;&quot;</span>;</span><br><span class="line">  n = <span class="title class_">Math</span>.<span class="title function_">abs</span>(n);</span><br><span class="line"></span><br><span class="line">  <span class="comment">//算小数点后</span></span><br><span class="line">  <span class="keyword">var</span> s = <span class="string">&quot;&quot;</span>;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; fraction.<span class="property">length</span>; i++) &#123;</span><br><span class="line">    <span class="comment">//角位置 n*10 =&gt; 移一位小数 =&gt; floor去小数 =&gt; 取除10余数 =&gt; 拼接上角</span></span><br><span class="line">    <span class="comment">//分位置 m*10*10 =&gt; 移两位小数=&gt; floor去小数 =&gt; 取除10余数 =&gt; 拼接上角分</span></span><br><span class="line">    s += (</span><br><span class="line">      digit[<span class="title class_">Math</span>.<span class="title function_">floor</span>(n * <span class="number">10</span> * <span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">10</span>, i)) % <span class="number">10</span>] + fraction[i]</span><br><span class="line">    ).<span class="title function_">replace</span>(<span class="regexp">/零./</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="comment">//是否有角与分</span></span><br><span class="line">  s = s || <span class="string">&quot;整&quot;</span>;</span><br><span class="line"></span><br><span class="line">  <span class="comment">//算整数部分</span></span><br><span class="line">  n = <span class="title class_">Math</span>.<span class="title function_">floor</span>(n);</span><br><span class="line">  <span class="comment">//遍历 [&quot;元&quot;, &quot;万&quot;, &quot;亿&quot;]</span></span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; unit[<span class="number">0</span>].<span class="property">length</span> &amp;&amp; n &gt; <span class="number">0</span>; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> p = <span class="string">&quot;&quot;</span>;</span><br><span class="line">    <span class="comment">//遍历 [&quot;&quot;, &quot;拾&quot;, &quot;佰&quot;, &quot;仟&quot;]</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; unit[<span class="number">1</span>].<span class="property">length</span> &amp;&amp; n &gt; <span class="number">0</span>; j++) &#123;</span><br><span class="line">      <span class="comment">//  digit[4]        &quot;&quot;</span></span><br><span class="line">      <span class="comment">//  digit[3]        拾</span></span><br><span class="line">      <span class="comment">//  digit[5]        佰</span></span><br><span class="line">      <span class="comment">//  digit[6]        仟</span></span><br><span class="line">      <span class="comment">//  结束循环添加单位，p保存到s中，进入下一循环</span></span><br><span class="line">      <span class="comment">//  digit[8]        仟</span></span><br><span class="line">      p = digit[n % <span class="number">10</span>] + unit[<span class="number">1</span>][j] + p;</span><br><span class="line">      n = <span class="title class_">Math</span>.<span class="title function_">floor</span>(n / <span class="number">10</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    s = p.<span class="title function_">replace</span>(<span class="regexp">/(零.)*零$/</span>, <span class="string">&quot;&quot;</span>).<span class="title function_">replace</span>(<span class="regexp">/^$/</span>, <span class="string">&quot;零&quot;</span>) + unit[<span class="number">0</span>][i] + s;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    head +</span><br><span class="line">    s</span><br><span class="line">      .<span class="title function_">replace</span>(<span class="regexp">/(零.)*零元/</span>, <span class="string">&quot;元&quot;</span>)</span><br><span class="line">      .<span class="title function_">replace</span>(<span class="regexp">/(零.)+/g</span>, <span class="string">&quot;零&quot;</span>)</span><br><span class="line">      .<span class="title function_">replace</span>(<span class="regexp">/^整$/</span>, <span class="string">&quot;零元整&quot;</span>)</span><br><span class="line">  );</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">digitUppercase</span>(<span class="number">86534.63</span>));</span><br></pre></td></tr></table></figure>

<h3 id="H5-获取经纬度"><a href="#H5-获取经纬度" class="headerlink" title="H5 获取经纬度"></a>H5 获取经纬度</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// h5 获取经纬度</span></span><br><span class="line"><span class="keyword">const</span> options = &#123;</span><br><span class="line">  <span class="attr">enableHighAccuracy</span>: <span class="literal">true</span>,</span><br><span class="line">  <span class="attr">timeout</span>: <span class="number">5000</span>,</span><br><span class="line">  <span class="attr">maximumAge</span>: <span class="number">0</span>,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">success</span>(<span class="params">pos</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> crd = pos.<span class="property">coords</span>;</span><br><span class="line"></span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;Your current position is:&quot;</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`Latitude : <span class="subst">$&#123;crd.latitude&#125;</span>`</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`Longitude: <span class="subst">$&#123;crd.longitude&#125;</span>`</span>);</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`More or less <span class="subst">$&#123;crd.accuracy&#125;</span> meters.`</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">error</span>(<span class="params">err</span>) &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">warn</span>(<span class="string">`ERROR(<span class="subst">$&#123;err.code&#125;</span>): <span class="subst">$&#123;err.message&#125;</span>`</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 谷歌浏览器中，navigator.geolocation 只有在https环境下生效, 可以在火狐，edge下调试</span></span><br><span class="line">navigator.<span class="property">geolocation</span>.<span class="title function_">getCurrentPosition</span>(success, error, options);</span><br></pre></td></tr></table></figure>

<h3 id="小技巧"><a href="#小技巧" class="headerlink" title="小技巧"></a>小技巧</h3><ul>
<li>必传参数 ，把函数必传那个参数的默认值 设置成一个函数，函数的作用是抛出一个异常</li>
<li>数字千分位格式化</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> num = <span class="number">123456.78901</span>;</span><br><span class="line"><span class="keyword">let</span> formNum = num.<span class="title function_">toLocaleString</span>(<span class="string">&quot;en-US&quot;</span>, &#123;</span><br><span class="line">  <span class="attr">minimumFractionDigits</span>: <span class="number">5</span>, <span class="comment">// 小数点后取五位</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(formNum);</span><br></pre></td></tr></table></figure>

<h2 id="请求与响应"><a href="#请求与响应" class="headerlink" title="请求与响应"></a>请求与响应</h2><h3 id="响应参数"><a href="#响应参数" class="headerlink" title="响应参数"></a>响应参数</h3><ul>
<li><strong>X-Frame-Options</strong>：iframe 权限参数</li>
<li><strong>Content-Security-Policy</strong>:服务器通过发送一个 CSP 头部，来告诉浏览器什么是<code>被授权执行的</code>与<code>什么是需要被禁止的</code></li>
</ul>
<h3 id="请求参数"><a href="#请求参数" class="headerlink" title="请求参数"></a>请求参数</h3></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="http://example.com">lzoxun</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="http://example.com/2023/07/22/web/issues/issues-javacript/">http://example.com/2023/07/22/web/issues/issues-javacript/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="http://example.com" target="_blank">学习笔记</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2023/07/22/web/issues/issues-web/" title="web"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">web</div></div></a></div><div class="next-post pull-right"><a href="/2023/07/22/web/issues/issues-html/" title="html"><div class="cover" style="background: var(--default-bg-color)"></div><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">html</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="https://i.loli.net/2021/02/24/5O1day2nriDzjSu.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">lzoxun</div><div class="author-info__description"></div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">108</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">1</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/liaozhongxun"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/liaozhongxun" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:869664233@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">这是我的文档</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%97%A9%E6%9C%9F-js-%E5%AD%98%E5%9C%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98"><span class="toc-number">1.</span> <span class="toc-text">早期 js 存在的一些问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS-%E6%A6%82%E5%BF%B5%E6%80%A7%E9%97%AE%E9%A2%98"><span class="toc-number">2.</span> <span class="toc-text">JS 概念性问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-number">2.1.</span> <span class="toc-text">数据类型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E5%B8%B8%E8%A7%81%E7%9A%84%E5%86%85%E7%BD%AE%E5%AF%B9%E8%B1%A1"><span class="toc-number">2.2.</span> <span class="toc-text">js 常见的内置对象</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E6%8D%AE%E5%AD%98%E5%82%A8%E5%BD%A2%E5%BC%8F"><span class="toc-number">2.3.</span> <span class="toc-text">数据存储形式</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%AD%98%E5%82%A8%E7%A9%BA%E9%97%B4"><span class="toc-number">2.3.1.</span> <span class="toc-text">存储空间</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6"><span class="toc-number">2.3.2.</span> <span class="toc-text">垃圾回收机制</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B7%A8%E5%9F%9F%E6%96%B9%E6%A1%88%E6%80%BB%E7%BB%93"><span class="toc-number">2.4.</span> <span class="toc-text">跨域方案总结</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF-EventLoop"><span class="toc-number">2.5.</span> <span class="toc-text">事件循环 EventLoop</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#call%E3%80%81apply%E3%80%81bind"><span class="toc-number">2.6.</span> <span class="toc-text">call、apply、bind</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E5%88%A0%E9%99%A4%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="toc-number">2.7.</span> <span class="toc-text">js 删除对象属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#jQuery-%E7%9A%84%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C"><span class="toc-number">2.8.</span> <span class="toc-text">jQuery 的链式操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#new-%E5%86%85%E9%83%A8%E5%81%9A%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-number">2.9.</span> <span class="toc-text">new 内部做了什么？</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%9C%E7%94%A8%E5%9F%9F"><span class="toc-number">2.10.</span> <span class="toc-text">作用域</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E9%97%AD%E5%8C%85"><span class="toc-number">2.10.1.</span> <span class="toc-text">闭包</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#IIFE-%E5%8C%BF%E5%90%8D%E5%87%BD%E6%95%B0"><span class="toc-number">2.11.</span> <span class="toc-text">IIFE 匿名函数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Memoization"><span class="toc-number">2.12.</span> <span class="toc-text">Memoization</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#URI-URL-URN"><span class="toc-number">2.13.</span> <span class="toc-text">URI URL URN</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%9F%AF%E9%87%8C%E5%8C%96%E3%80%81%E5%81%8F%E5%87%BD%E6%95%B0%E3%80%81Compose%E3%80%81Pipe"><span class="toc-number">2.14.</span> <span class="toc-text">柯里化、偏函数、Compose、Pipe</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B%E7%9A%84%E7%BA%AF%E5%87%BD%E6%95%B0%E4%B8%8E%E5%89%AF%E4%BD%9C%E7%94%A8"><span class="toc-number">2.15.</span> <span class="toc-text">函数式编程的纯函数与副作用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JS-%E7%9A%84%E5%86%85%E5%AD%98%E7%AE%A1%E7%90%86"><span class="toc-number">2.16.</span> <span class="toc-text">JS 的内存管理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JS-%E8%80%97%E6%80%A7%E8%83%BD%E6%93%8D%E4%BD%9C%E4%B8%8E%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6"><span class="toc-number">2.17.</span> <span class="toc-text">JS 耗性能操作与时间复杂度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1%E9%BC%A0%E6%A0%87%E4%BD%8D%E7%BD%AE"><span class="toc-number">2.18.</span> <span class="toc-text">事件对象鼠标位置</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%80%E6%9C%89%E6%B5%8F%E8%A7%88%E5%99%A8-userAgent-%E9%83%BD%E6%98%AF-Mozilla"><span class="toc-number">2.19.</span> <span class="toc-text">所有浏览器 userAgent 都是 Mozilla?</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A6%81%E6%AD%A2%E9%80%9A%E8%BF%87%E6%8E%A7%E5%88%B6%E5%8F%B0%E6%9F%A5%E7%9C%8B%E4%BB%A3%E7%A0%81"><span class="toc-number">2.20.</span> <span class="toc-text">禁止通过控制台查看代码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Date-%E8%AF%A6%E8%A7%A3"><span class="toc-number">2.21.</span> <span class="toc-text">Date 详解</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Number"><span class="toc-number">2.22.</span> <span class="toc-text">Number</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Number-MAX-VALUE"><span class="toc-number">2.22.1.</span> <span class="toc-text">Number.MAX_VALUE</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Number-MAX-SAFE-INTEGER"><span class="toc-number">2.22.2.</span> <span class="toc-text">Number.MAX_SAFE_INTEGER</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#0-1-0-2-0-3"><span class="toc-number">2.22.3.</span> <span class="toc-text">0.1+0.2!&#x3D;0.3</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BF%9B%E5%88%B6"><span class="toc-number">2.23.</span> <span class="toc-text">进制</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8E%9F%E7%A0%81%E3%80%81%E5%8F%8D%E7%A0%81%E3%80%81%E8%A1%A5%E7%A0%81"><span class="toc-number">2.23.1.</span> <span class="toc-text">原码、反码、补码</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%B0%8F%E6%95%B0%E7%9A%84%E4%BA%8C%E8%BF%9B%E5%88%B6"><span class="toc-number">2.23.2.</span> <span class="toc-text">小数的二进制</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%8D%E8%BF%90%E7%AE%97%E7%AC%A6"><span class="toc-number">2.23.3.</span> <span class="toc-text">位运算符</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Set%E3%80%81Map%E3%80%81weakSet%E3%80%81weakMap"><span class="toc-number">2.23.4.</span> <span class="toc-text">Set、Map、weakSet、weakMap</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E4%BB%A3%E7%A0%81%E6%95%B4%E6%B4%81%E4%B9%8B%E9%81%93"><span class="toc-number">2.24.</span> <span class="toc-text">js 代码整洁之道</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%96%AD%E7%82%B9%E8%B0%83%E8%AF%95"><span class="toc-number">2.25.</span> <span class="toc-text">断点调试</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS-%E5%8A%9F%E8%83%BD%E6%80%A7%E9%97%AE%E9%A2%98"><span class="toc-number">3.</span> <span class="toc-text">JS 功能性问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E5%88%A4%E6%96%AD%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%9B%BE%E7%89%87%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8"><span class="toc-number">3.1.</span> <span class="toc-text">js 判断服务器图片是否存在</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#js-%E6%8F%92%E5%85%A5%E6%A0%B7%E5%BC%8F"><span class="toc-number">3.2.</span> <span class="toc-text">js 插入样式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%B1%BB%E6%95%B0%E7%BB%84%E8%BD%AC%E6%95%B0%E7%BB%84"><span class="toc-number">3.3.</span> <span class="toc-text">类数组转数组</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%B9%E6%8D%AE%E5%AF%B9%E8%B1%A1%E6%9F%90%E5%B1%9E%E6%80%A7%E5%8E%BB%E9%87%8D"><span class="toc-number">3.4.</span> <span class="toc-text">根据对象某属性去重</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E6%89%81%E5%B9%B3%E5%8C%96"><span class="toc-number">3.5.</span> <span class="toc-text">数组扁平化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Blob"><span class="toc-number">3.6.</span> <span class="toc-text">Blob</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#Blob-%E5%88%9B%E5%BB%BA"><span class="toc-number">3.6.1.</span> <span class="toc-text">Blob 创建</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Blob-%E4%B8%8B%E8%BD%BD"><span class="toc-number">3.6.2.</span> <span class="toc-text">Blob 下载</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Blob-%E8%BD%AC%E5%9C%B0%E5%9D%80"><span class="toc-number">3.6.3.</span> <span class="toc-text">Blob 转地址</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#JS-%E8%8E%B7%E5%8F%96-base64-%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">3.7.</span> <span class="toc-text">JS 获取 base64 的方式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%BE%93%E5%85%A5%E6%A1%86%E5%85%89%E6%A0%87"><span class="toc-number">3.8.</span> <span class="toc-text">输入框光标</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0"><span class="toc-number">3.9.</span> <span class="toc-text">图片上传</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#FileReader"><span class="toc-number">3.9.1.</span> <span class="toc-text">FileReader</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#FormData"><span class="toc-number">3.9.2.</span> <span class="toc-text">FormData</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%8A%E4%BC%A0"><span class="toc-number">3.9.3.</span> <span class="toc-text">上传</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%A7%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0"><span class="toc-number">3.9.4.</span> <span class="toc-text">大文件上传</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#Canvas-%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0"><span class="toc-number">3.9.5.</span> <span class="toc-text">Canvas 图片上传</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E9%9B%86"><span class="toc-number">3.10.</span> <span class="toc-text">字符集</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%BC%96%E7%A0%81"><span class="toc-number">3.11.</span> <span class="toc-text">字符串编码</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%BB%9A%E5%8A%A8%E6%9D%A1%E5%8A%A8%E6%80%81%E5%BA%95%E9%83%A8"><span class="toc-number">3.12.</span> <span class="toc-text">滚动条动态底部</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8C%87%E5%AE%9A%E6%97%B6%E9%97%B4%E8%A7%A6%E5%8F%91%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="toc-number">3.13.</span> <span class="toc-text">指定时间触发定时器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#requestAnimationFrame"><span class="toc-number">3.14.</span> <span class="toc-text">requestAnimationFrame</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%89%B9%E7%82%B9"><span class="toc-number">3.14.1.</span> <span class="toc-text">特点</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#iframe-%E8%AF%A6%E7%BB%86"><span class="toc-number">3.15.</span> <span class="toc-text">iframe 详细</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%A1%B6%E9%83%A8"><span class="toc-number">3.16.</span> <span class="toc-text">页面滚动到顶部</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%82%B9%E5%87%BB%E5%A4%8D%E5%88%B6"><span class="toc-number">3.17.</span> <span class="toc-text">点击复制</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%95%B0%E5%AD%97%E8%BD%AC%E5%A4%A7%E5%86%99"><span class="toc-number">3.18.</span> <span class="toc-text">数字转大写</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#H5-%E8%8E%B7%E5%8F%96%E7%BB%8F%E7%BA%AC%E5%BA%A6"><span class="toc-number">3.19.</span> <span class="toc-text">H5 获取经纬度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B0%8F%E6%8A%80%E5%B7%A7"><span class="toc-number">3.20.</span> <span class="toc-text">小技巧</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%B7%E6%B1%82%E4%B8%8E%E5%93%8D%E5%BA%94"><span class="toc-number">4.</span> <span class="toc-text">请求与响应</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E5%8F%82%E6%95%B0"><span class="toc-number">4.1.</span> <span class="toc-text">响应参数</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AF%B7%E6%B1%82%E5%8F%82%E6%95%B0"><span class="toc-number">4.2.</span> <span class="toc-text">请求参数</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-11/" title="win 11 set">win 11 set</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-gitbash/" title="git bash">git bash</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-wsl/" title="wsl">wsl</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/window/win-main/" title="window">window</a><time datetime="2023-07-22T07:14:09.700Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2023/07/22/web/%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98/" title="兼容问题">兼容问题</a><time datetime="2023-07-22T07:14:09.699Z" title="发表于 2023-07-22 15:14:09">2023-07-22</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2023 By lzoxun</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><div class="js-pjax"></div><script id="canvas_nest" defer="defer" color="0,0,255" opacity="0.7" zIndex="-1" count="99" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div class="no-result" id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/haruto.model.json"},"display":{"position":"right","width":100,"height":200,"right":300},"mobile":{"show":true}});</script></body></html>